Router Vue

Começando

Nota

Nós usaremos o ES2015 nas amostras de código no guia.

Além disso, todos os exemplos estarão usando a versão completa do Vue para tornar
possível a compilação de modelos on-the-fly. Veja mais detalhes aqui .

Criar um aplicativo de página única com o roteador Vue + Vue é extremamente

simples. Com o Vue.js, já estamos compondo nosso aplicativo com componentes. Ao
adicionar o Vue Router ao mix, tudo o que precisamos fazer é mapear nossos componentes
para as rotas e deixar que o Vue Router saiba onde processá-los. Aqui está um exemplo
básico:

HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>

JavaScript
// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter
// and then call `Vue.use(VueRouter)`.

// 1. Define route components.

// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. Define some routes

// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]

// 3. Create the router instance and pass the `routes` option

// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes // short for `routes: routes`
})

// 4. Create and mount the root instance.

// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
router
}).$mount('#app')

// Now the app has started!

Ao injetar o roteador, obtemos acesso a ele this.$router, assim como a rota atual,
como this.$routedentro de qualquer componente:

// Home.vue
export default {
computed: {
username () {
// We will see what `params` is shortly
return this.$route.params.username
}
},
methods: {
goBack () {
window.history.length > 1
? this.$router.go(-1)
 : this.$router.push('/')
}
}
}

Em todos os documentos, costumamos usar a routerinstância. Tenha em mente

que this.$routeré exatamente o mesmo que usar router. O motivo pelo qual
usamos this.$router é porque não queremos importar o roteador em todos os componentes
que precisam manipular o roteamento.

Você também pode conferir este exemplo ao vivo .

Observe que <router-link>a .router-link-activeclasse recebe automaticamente a classe

quando a rota de destino é correspondida. Você pode aprender mais sobre isso em
sua referência da API .

Dynamic Route Matching

Frequentemente, precisaremos mapear rotas com o padrão fornecido para o mesmo

componente. Por exemplo, podemos ter um Usercomponente que deve ser renderizado
para todos os usuários, mas com IDs de usuário diferentes. Em vue-routernós podemos
usar um segmento dinâmico no caminho para conseguir isso:

const User = {
template: '<div>User</div>'
}

const router = new VueRouter({

routes: [
// dynamic segments start with a colon
{ path: '/user/:id', component: User }
]
})

Agora, as URLs gostam /user/fooe /user/barserão mapeadas para a mesma rota.

Um segmento dinâmico é denotado por dois pontos :. Quando uma rota é correspondida, o
valor dos segmentos dinâmicos será exposto como this.$route.paramsem todos os
componentes. Portanto, podemos renderizar o ID do usuário atual atualizando Usero
modelo para isto:
{
r=
e
stU
n
cte
.}/o
u
o
sr{$
iv>U
d
:'<
la
p
m

const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
Você pode conferir um exemplo ao vivo aqui .

Você pode ter vários segmentos dinâmicos na mesma rota e eles serão mapeados para os
campos correspondentes em $route.params. Exemplos:

padronizar caminho combinado $ route.params

/ user /: username / user / evan }
:'v
m
a
rn
e
s
{u

/ user /: username / post /: post_id / user / evan / post / 123 }

3
2
1
id
t_
o
,p
:'v
m
a
rn
e
s
{u

Além disso $route.params, o $routeobjeto também expõe outras informações úteis,

como $route.query(se houver uma consulta na URL) $route.hash, etc. Você pode verificar
os detalhes completos na Referência da API .

Reagindo às mudanças dos parâmetros

Uma coisa a ser observada ao usar rotas com params é que, quando o usuário navega
de /user/foopara /user/bar, a mesma instância do componente será reutilizada . Como
as duas rotas processam o mesmo componente, isso é mais eficiente do que destruir a
instância antiga e criar uma nova. No entanto, isso também significa que os ganchos do
ciclo de vida do componente não serão chamados .

Para reagir a mudanças de parâmetros no mesmo componente, você pode simplesmente

observar o $routeobjeto:

const User = {
template: '...',
watch: {
'$route' (to, from) {
// react to route changes...
}
}
}

Ou use o beforeRouteUpdate protetor de navegação apresentado em 2.2:

const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
Padrões Avançados de Correspondência

usa path-to-regexp como seu mecanismo de correspondência de caminhos, por isso

t
-ro
e
u
v

suporta muitos padrões de correspondência avançados, como segmentos dinâmicos

opcionais, zero ou mais / um ou mais requisitos e até mesmo padrões de regex
personalizados. Confira sua documentação para esses padrões avançados e este
exemplo de uso deles .t
-ro
e
u
v

Prioridade de correspondência

Às vezes, o mesmo URL pode ser correspondido por várias rotas. Nesse caso, a prioridade
correspondente é determinada pela ordem de definição da rota: quanto mais cedo uma rota
é definida, maior a prioridade que recebe.

Rotas aninhadas

UIs de aplicativos reais geralmente são compostos de componentes aninhados em vários

níveis de profundidade. Também é muito comum que os segmentos de um URL
correspondam a uma determinada estrutura de componentes aninhados, por exemplo:

Com vue-routerisso, é muito simples expressar esse relacionamento usando configurações

de rota aninhadas.

Dado o aplicativo que criamos no último capítulo:

<div id="app">
<router-view></router-view>
</div>

const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})

O <router-view>aqui é uma saída de nível superior. Ele renderiza o componente

correspondido por uma rota de nível superior. Da mesma forma, um componente
renderizado também pode conter seu próprio, aninhado <router-view>. Por exemplo, se
adicionarmos um dentro Userdo modelo do componente:

const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}

Para renderizar componentes nessa saída aninhada, precisamos usar a childrenopção

na VueRouterconfiguração do construtor:

const router = new VueRouter({

routes: [
{ path: '/user/:id', component: User,
children: [
{
// UserProfile will be rendered inside User's <router-view>
// when /user/:id/profile is matched
path: 'profile',
component: UserProfile
},
{
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
path: 'posts',
component: UserPosts
}
]
}
]
})
Observe que os caminhos aninhados que começam com serão tratados como um
/

caminho raiz. Isso permite aproveitar o aninhamento de componentes sem precisar

usar uma URL aninhada.

Como você pode ver, a opção é apenas outro Array de objetos de configuração de rota
n
re
ild
h
c

como ele mesmo. Portanto, você pode manter as visualizações de aninhamento o quanto
s
te
u
ro

precisar.

Neste ponto, com a configuração acima, quando você visita , nada será renderizado
rfo
e
s
/u

dentro da saída, porque nenhum sub route é correspondido. Talvez você queira renderizar
r
e
s
U

alguma coisa lá. Nesse caso, você pode fornecer um caminho de sub-rotina vazio:

const router = new VueRouter({

routes: [
{
path: '/user/:id', component: User,
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
{ path: '', component: UserHome },

// ...other sub routes

]
}
]
})

Uma demonstração de trabalho deste exemplo pode ser encontrada aqui

Navegação programática

Além de usar <router-link>para criar tags de âncora para navegação declarativa, podemos
fazer isso programaticamente usando os métodos de instância do roteador.

#router.push(location, onComplete?, onAbort?)

Nota: Dentro de uma instância do Vue, você tem acesso à instância do roteador
como $router. Você pode, portanto, ligar this.$router.push.

Para navegar para um URL diferente, use router.push. Esse método envia uma nova
entrada para a pilha do histórico, portanto, quando o usuário clicar no botão Voltar do
navegador, ele será direcionado para o URL anterior.
Este é o método chamado internamente quando você clica em um <router-link>, então
clicar <router-link :to="...">é o equivalente de chamar router.push(...).

Declarativo Programático

<router-link :to="..."> router.push(...)

O argumento pode ser um caminho de string ou um objeto de descritor de local. Exemplos:

// literal string path

router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: 123 }})

// with query, resulting in /register?plan=private

router.push({ path: 'register', query: { plan: 'private' }})

Nota : paramssão ignorados se pathfor fornecido um, o que não é o caso query, como
mostrado no exemplo acima. Em vez disso, você precisa fornecer a namerota ou
especificar manualmente o todo pathcom qualquer parâmetro:

const userId = 123

router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// This will NOT work
router.push({ path: '/user', params: { userId }}) // -> /user

As mesmas regras se aplicam à topropriedade do router-linkcomponente.

No 2.2.0+, opcionalmente, forneça onCompletee retorne onAbortcallbacks

para router.pushou router.replacecomo o segundo e terceiro argumentos. Esses retornos
de chamada serão chamados quando a navegação for concluída com êxito (depois que
todos os ganchos assíncronos forem resolvidos) ou abortados (navegados para a mesma
rota ou para uma rota diferente antes de a navegação atual ser concluída),
respectivamente.

Nota: Se o destino for o mesmo da rota atual e somente os parâmetros estiverem mudando
(por exemplo, indo de um perfil para outro /users/1-> /users/2), você terá que
usá-lo beforeRouteUpdatepara reagir às mudanças (por exemplo, buscar as informações
do usuário).
router.replace(location, onComplete?, onAbort?)

Ele age como router.push, a única diferença é que ele navega sem pressionar uma nova
entrada de histórico, como o próprio nome sugere - ele substitui a entrada atual.

Declarativo Programático

<router-link :to="..." replace> router.replace(...)

router.go(n)

Esse método usa um único inteiro como parâmetro que indica por quantos passos para
avançar ou retroceder na pilha do histórico, semelhante a window.history.go(n).

Exemplos

// go forward by one record, the same as history.forward()

router.go(1)

// go back by one record, the same as history.back()

router.go(-1)

// go forward by 3 records
router.go(3)

// fails silently if there aren't that many records.

router.go(-100)
router.go(100)

Manipulação da História

Você deve ter notado que router.push, router.replacee router.gosão vias

de window.history.pushState, window.history.replaceStateewindow.history.go , e eles
fazem imitar os window.historyAPIs.

Portanto, se você já estiver familiarizado com as APIs do Histórico do Navegador ,

manipular o histórico será super fácil com o Vue Router.

Vale ressaltar que os métodos de navegação Vue Router ( push, replace, go) trabalhar de
forma consistente em todos os modos Router ( history, hashe abstract).
Rotas nomeadas

Às vezes, é mais conveniente identificar uma rota com um nome, especialmente ao se

vincular a uma rota ou realizar navegações. Você pode dar um nome a uma rota
nas routesopções ao criar a instância do roteador:

const router = new VueRouter({

routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})

Para vincular a uma rota nomeada, você pode passar um objeto para o prop router-linkdo
componente to:

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

Este é exatamente o mesmo objeto usado programaticamente com router.push():

router.push({ name: 'user', params: { userId: 123 }})

Em ambos os casos, o roteador irá navegar para o caminho /user/123.

Exemplo completo aqui

Exibições nomeadas

Às vezes, é necessário exibir várias exibições ao mesmo tempo em vez de aninhar, por
exemplo, criando um layout com uma sidebarexibição e uma mainexibição. É aqui que as
visualizações nomeadas são úteis. Em vez de ter uma única saída na sua opinião, você
pode ter vários e dar a cada um deles um nome. Um router-viewsem nome será
dado defaultcomo seu nome.

<router-view class="view one"></router-view>

<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
Uma exibição é renderizada usando um componente, portanto, várias visualizações exigem
vários componentes para a mesma rota. Certifique-se de usar a opção components(com
um s):

const router = new VueRouter({

routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})

Uma demonstração de trabalho deste exemplo pode ser encontrada aqui .

Exibições nomeadas aninhadas

É possível criar layouts complexos usando vistas nomeadas com vistas aninhadas. Ao fazer
isso, você também precisará nomear os router-view
componentes aninhados usados. Vamos pegar um exemplo do painel Configurações:

 Nav é apenas um componente regular

 UserSettings é o componente de visualização
 UserEmailsSubscriptions, UserProfile, UserProfilePreviewSão encaixados
componentes vista

Nota : Vamos esquecer como o HTML / CSS deve parecer para representar tal layout e
focar nos componentes usados

A <template>seção para o UserSettingscomponente no layout acima seria algo como isto:

<!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
<NavBar/>
<router-view/>
<router-view name="helper"/>
</div>

Os componentes da visão aninhada são omitidos aqui, mas você pode encontrar o
código-fonte completo para o exemplo acima aqui

Então você pode conseguir o layout acima com esta configuração de rota:

{
path: '/settings',
// You could also have named views at the top
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}

Redirecionar e Alias

Redirecionar

Redirecionar também é feito na routesconfiguração. Para redirecionar de /apara /b:

const router = new VueRouter({

routes: [
{ path: '/a', redirect: '/b' }
]
})

O redirecionamento também pode segmentar uma rota nomeada:

const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})

Ou até mesmo use uma função para redirecionamento dinâmico:

const router = new VueRouter({

routes: [
{ path: '/a', redirect: to => {
// the function receives the target route as the argument
// return redirect path/location here.
}}
]
})

Observe que os Guardas de Navegação não são aplicados na rota que redireciona, apenas
no seu destino. No exemplo abaixo, adicionar um ou guarda à rota não teria nenhum efeito.
t
n
rE
fo
e
b v
a
rL
fo
e
b /a

Para outro uso avançado, confira o exemplo .

Alias

Um redirecionamento significa quando o usuário visita e o URL será substituído por e

/a /b

depois será correspondido como . Mas o que é um alias?

/b

Um alias de como significa quando o usuário visita , o URL permanece , mas será
/a /b /b /b

correspondido como se o usuário estivesse visitando . /a

O acima pode ser expresso na configuração da rota como:

const router = new VueRouter({

routes: [
{ path: '/a', component: A, alias: '/b' }
]
})

Um alias oferece a liberdade de mapear uma estrutura de interface do usuário para uma
URL arbitrária, em vez de ser restringida pela estrutura de aninhamento da configuração.

Para uso avançado, confira o exemplo .

Passando Props para os Componentes de Rota

O uso $route do componente cria um acoplamento rígido com a rota, o que limita a
flexibilidade do componente, já que ele só pode ser usado em determinadas URLs.

Para dissociar este componente da opção de uso do roteador props:

Em vez de acoplar a $route:

const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})

Desacoplar usando props

const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },

// for routes with named views, you have to define the `props` option for
each named view:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})

Isso permite que você use o componente em qualquer lugar, o que torna o componente
mais fácil de reutilizar e testar.

Modo booleano

Quando props estiver definido como true, o route.paramsserá definido como o componente
adereços.
Modo de objeto

Quando props é um objeto, isso será definido como o componente adjunto como é. Útil para
quando os adereços são estáticos.
({cro
R
V
w
e
stru
= n
o
s:[{p
te
u
}]})
u
sl,cP
w
f-e
in
m
:'/ro
th
a

const router = new VueRouter({

routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props:
{ newsletterPopup: false } }
]
})

Modo de função

Você pode criar uma função que retorne adereços. Isso permite converter parâmetros em
outros tipos, combinar valores estáticos com valores baseados em rota, etc.

const router = new VueRouter({

routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query:
route.query.q }) }
]
})

O URL /search?q=vuepassaria {query: 'vue'}como adereços ao SearchUsercomponente.

Tente manter a propsfunção sem estado, pois ela é avaliada apenas nas alterações de
rota. Use um componente wrapper se você precisar definir os props, dessa forma o vue
pode reagir a mudanças de estado.

Para uso avançado, confira o exemplo .

HTML5 History Mode

O modo padrão vue-routeré o modo hash - ele usa o hash da URL para simular uma URL
completa para que a página não seja recarregada quando a URL for alterada.

Para se livrar do hash, podemos usar o modo de histórico do roteador , que aproveita
a history.pushStateAPI para obter a navegação de URL sem recarregar a página:

const router = new VueRouter({

mode: 'history',
 routes: [...]
})

Ao usar o modo histórico, o URL parecerá "normal", por

exemplo http://oursite.com/user/id. Lindo!

Aqui vem um problema: como nosso aplicativo é um aplicativo do lado do cliente em uma
única página, sem uma configuração adequada do servidor, os usuários receberão um erro
404 se acessarem http://oursite.com/user/iddiretamente em seu navegador. Agora isso é
feio.

Não se preocupe: para corrigir o problema, tudo o que você precisa fazer é adicionar uma
rota simples de recuperação para seu servidor. Se o URL não corresponder a nenhum
recurso estático, ele deverá exibir a mesma index.htmlpágina em que seu aplicativo está.
Beautiful, novamente!

Exemplo de configurações do servidor

Apache

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

Em vez de mod_rewrite, você também pode usar .FallbackResource

#

nginx

location / {
try_files $uri $uri/ /index.html;
}

Native Node.js

const http = require('http')

const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
}

res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
})

res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})

Express com o Node.js

Para o Node.js / Express, considere usar o middleware connect-history-api-fallback .

Serviços de Informações da Internet (IIS)

1. Instalar o IIS UrlRewrite

2. Crie um arquivo no diretório raiz do seu site com o seguinte:
fig
n
o
.c
b
e
w

<?xml version="1.0" encoding="UTF-8"?>

<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500"
stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile"
negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory"
negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Caddie

rewrite {
regexp .*
to {path} /
}

Firebase hosting

Adicione isto ao seu firebase.json:

{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}

Advertência

Há uma ressalva para isso: seu servidor não irá mais reportar erros 404, pois todos os
caminhos não encontrados agora servem o seu arquivo. Para contornar o problema, você
l
tm
.h
x
e
d
in

deve implementar uma rota pega-tudo dentro do seu aplicativo Vue para mostrar uma
página 404:

const router = new VueRouter({

mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})

Como alternativa, se você estiver usando um servidor Node.js, poderá implementar o

fallback usando o roteador no lado do servidor para corresponder ao URL de entrada e
responder com 404 se nenhuma rota for correspondida. Confira a documentação de
renderização do lado do servidor Vuepara mais informações.