Migração do Vue Router 0.7.x

Somente Vue Router 2 é compatível com Vue 2, então se você estiver atualizando o Vue, terá de atualizar também o Vue Router. Esta é a razão pela qual incluímos detalhes de migração aqui na documentação principal. Para um guia completo em como usar o novo Vue Router, veja a documentação do Vue Router.

Inicialização do Roteador

router.start obsoleto

Não há mais uma API especial para inicializar um aplicativo com Vue Router. Em vez de:

router.start({
template: '<router-view></router-view>'
}, '#app')

Passe uma propriedade router para a instância Vue:

new Vue({
el: '#app',
router: router,
template: '<router-view></router-view>'
})

Ou, se estiver usando a compilação runtime-only do Vue:

new Vue({
el: '#app',
router: router,
render: h => h('router-view')
})

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de router.start.

Definição de Rotas

router.map alterado

Rotas são agora definidas como um Array em uma opção routes na inicialização do roteador. Então estas rotas, por exemplo:

router.map({
'/foo': {
component: Foo
},
'/bar': {
component: Bar
}
})

Serão definidas desta forma:

var router = new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})

A sintaxe com Array oferece mais precisão na definição de rotas, uma vez que ao iterar sobre objetos não existe garantia da mesma ordem dos atributos entre navegadores.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de router.map.

router.on removido

Se você precisar programaticamente gerar rotas quando iniciar a aplicação, é possível fazer isso acrescentando dinamicamente definições a um Array de rotas. Por exemplo:

// Rotas base normais
var routes = [
// ...
]

// Rotas geradas dinamicamente
marketingPages.forEach(function (page) {
routes.push({
path: '/marketing/' + page.slug
component: {
extends: MarketingComponent
data: function () {
return { page: page }
}
}
})
})

var router = new Router({
routes: routes
})

Se houver necessidade de adicionar rotas após a inicialização, é possível substituir a função de identificação de rotas com uma nova que inclua a rota que você deseja adicionar:

router.match = createMatcher(
[{
path: '/my/new/path',
component: MyComponent
}].concat(router.options.routes)
)

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de router.on.

router.beforeEach alterado

router.beforeEach agora trabalha assincronamente e recebe uma função next como seu terceiro argumento.

router.beforeEach(function (transition) {
if (transition.to.path === '/forbidden') {
transition.abort()
} else {
transition.next()
}
})
router.beforeEach(function (to, from, next) {
if (to.path === '/forbidden') {
next(false)
} else {
next()
}
})

subRoutes renomeado

Renomeado para children para consistência com Vue e com outras bibliotecas de rotas.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de subRoutes.

router.redirect alterado

Isto agora é uma opção da definição de uma rota. Então, por exemplo, você atualizará:

router.redirect({
'/tos': '/terms-of-service'
})

Para uma definição conforme exibido abaixo, na configuração de suas routes:

{
path: '/tos',
redirect: '/terms-of-service'
}

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de router.redirect.

router.alias alterado

Isto agora é uma opção da definição da rota de destino. Então, por exemplo, você atualizará:

router.alias({
'/manage': '/admin'
})

Para uma definição conforme exibido abaixo, na configuração de suas routes:

{
path: '/admin',
component: AdminPanel,
alias: '/manage'
}

Se você precisar de múltiplos apelidos, é possível usar uma sintaxe de Array:

alias: ['/manage', '/administer', '/administrate']

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de router.alias.

Propriedades Arbitrárias em Rotas substituído

Propriedades definidas arbitrariamente em rotas agora precisam estar inseridas em uma nova propriedade meta, para evitar conflitos com atualizações futuras. Então, por exemplo:

'/admin': {
component: AdminPanel,
requiresAuth: true
}

Deverá ser atualizado para:

{
path: '/admin',
component: AdminPanel,
meta: {
requiresAuth: true
}
}

Assim, quando estiver acessando posteriormente esta propriedade da rota, será necessário também seguir através de meta. Por exemplo:

if (route.meta.requiresAuth) {
// ...
}

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos propriedades arbitrárias em rotas não inseridas em meta.

Sintaxe para Arrays em Queries removed

Ao passar Arrays como parâmetros de queries, a sintaxe da query string não é mais /foo?users[]=Tom&users[]=Jerry. Em vez disto, a nova sintaxe é /foo?users=Tom&users=Jerry. Internamente, $route.query.users ainda será um Array, mas se houver somente um parâmetro na query: /foo?users=Tom, ao acessar diretamente esta rota, não haverá uma maneira do roteador saber se estamos esperando que users seja um Array. Por este motivo, considere adicionar um dado computado, substituindo qualquer acesso a $route.query.users por ele:

export default {
// ...
computed: {
// assim, `users` serão serão um Array
users () {
const users = this.$route.query.users
return Array.isArray(users) ? users : [users]
}
}
}

Identificação das Rotas

Agora a identificação das rotas utiliza path-to-regexp em seu interior, tornando-a muito mais flexível do que anteriormente.

Um ou Mais Parâmetros Nomeados alterado

A sintaxe mudou levemente, assim /category/*tags, por exemplo, deveria ser atualizado para /category/:tags+.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de sintaxe de rotas com regras obsoletas.

A diretiva v-link foi substituída por um novo componente <router-link>, visto que este tipo de tarefa é exclusivamente responsabilidade de componentes no Vue 2. Isso significa que em qualquer lugar que você tiver um link como este:

<a v-link="'/about'">Sobre</a>

Você precisará atualizá-lo desta forma:

<router-link to="/about">Sobre</router-link>

Observe que target="_blank" não é suportado no <router-link>, então se precisar forçar um link a abrir em uma nova aba, terá de utilizar <a> em seu lugar.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos com a diretiva v-link.

A diretiva v-link-active também foi removida em favor de se especificar uma tag separada no componente <router-link>. Então, por exemplo, você irá atualizar isto:

<li v-link-active>
<a v-link="'/about'">Sobre</a>
</li>

Para isto:

<router-link tag="li" to="/about">
<a>Sobre</a>
</router-link>

O elemento <a> será efetivamente o link (e obterá corretamente o href), mas a classe de estado ativo será aplicada ao elemento externo <li>.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos com a diretiva v-link-active.

router.go changed

Para consistência com a HTML5 History API, router.go agora é usado somente para navegação de voltar/avançar, enquanto router.push é usado para navegação para uma página específica.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de router.go sendo usado onde router.push deveria ser usado em seu lugar.

Opções do Roteador: Modos

hashbang: false removido

Hashbangs não são mais exigidos pelo Google para indexar uma URL, assim não são mais uma opção padrão (ou mesmo uma opção existente) para a estratégia de hash.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de hashbang: false.

history: true substituído

Todos os modos de roteamento foram condensados em uma simples opção mode. Atualize:

var router = new VueRouter({
history: true
})

Para:

var router = new VueRouter({
mode: 'history'
})

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de history: true.

abstract: true substituído

Todos os modos de roteamento foram condensados em uma simples opção mode. Atualize:

var router = new VueRouter({
abstract: true
})

Para:

var router = new VueRouter({
mode: 'abstract'
})

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de abstract: true.

Opções do Roteador: Diversos

saveScrollPosition substituído

Foi substituído com uma opção scrollBehavior que aceita uma função, de forma que o comportamento de rolagem possa ser completamente personalizado - inclusive para cada rota. Abre-se muitas novas possibilidades, mas para simplesmente replicar o antigo comportamento de:

saveScrollPosition: true

Você pode substituir com uma função como esta:

scrollBehavior: function (to, from, savedPosition) {
return savedPosition || { x: 0, y: 0 }
}

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de saveScrollPosition: true.

root renomeado

Renomeado para base para consistência com o elemento HTML <base>.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de root.

transitionOnLoad removido

Esta opção não é mais necessária agora que o sistema de transições do Vue tem explícito controle de appear de transições.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de transitionOnLoad: true.

suppressTransitionError removido

Removido para simplificação de gatilhos. Se você realmente precisar suprimir erros de transição, você pode usar trycatch para isto.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de suppressTransitionError: true.

Gatilhos do Roteador

activate substituído

Em seu lugar, use beforeRouteEnter no componente.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de active.

canActivate substituído

Em seu lugar, use beforeEnter no roteador.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de canActivate.

deactivate removido

Em seu lugar, use os gatilhos em componentes beforeDestroy ou destroyed.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de deactivate.

canDeactivate substituído

Em seu lugar, use beforeRouteLeave no componente.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de canDeactivate.

canReuse: false removido

Não existem mais casos de uso para isso no novo Vue Router.

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de canReuse: false.

data substituído

A propriedade $route agora é reativa, desta forma utilize um observador para reagir a mudanças de rota, como neste exemplo:

watch: {
'$route': 'fetchData'
},
methods: {
fetchData: function () {
// ...
}
}

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de data.

$loadingRouteData removido

Defina sua própria propriedade (por exemplo, isLoading) e atualize a situação através de um observador na rota. Por exemplo, se estiver obtendo dados remotos com o axios:

data () {
return {
posts: [],
isLoading: false,
fetchError: null
}
},
watch: {
'$route': () => {
this.isLoading = true
this.fetchData().then(() => {
this.isLoading = false
})
}
},
methods: {
fetchData: () => {
return axios.get('/api/posts')
.then(response => {
this.posts = response.data.posts
})
.catch(error => {
this.fetchError = error
})
}
}

Caminho para Atualização

Execute a ferramenta de migração para encontrar casos de $loadingRouteData.