Migration depuis Vue Router 0.7.x

Seul Vue Router 2 est compatible avec Vue 2, donc si vous mettez à jour Vue, vous devez mettre à jour Vue Router également. C’est pourquoi nous avons inclus des détails de migration ici dans les documentations principales. Pour un guide complet sur l’utilisation du nouveau Vue Router, consultez la documentation Vue Router.

Initialisation du Routeur

router.start remplacée

Il n’y a plus d’API dédiée pour initialiser Vue Router. Cela signifie qu’au lieu d’utiliser :

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

Vous avez juste à passer la propriété router à l’instance de Vue :

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

Ou, si vous utilisez le build runtime de Vue :

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

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'appel de router.start.

Définition de route

router.map remplacée

Les routes sont maintenant définies dans un tableau dans une option routes lors de l’instanciation du routeur. Donc ces routes par exemple :

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

Seront à présent définies ainsi :

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

La syntaxe par tableau permet une plus grande prédictibilité de la concordance des routes, puisque l’itération sur un objet ne garantit pas le même ordre d’affichage sur tous les navigateurs.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'appel de router.map.

router.on supprimée

Si vous avez besoin programmatiquement de générer les routes au démarrage de votre application, vous pouvez le faire dynamiquement en ajoutant les définitions de route dans votre tableau. Par exemple :

// Base de routes statiques
var routes = [
// ...
]
// Routes générées dynamiquement
marketingPages.forEach(function (page) {
routes.push({
path: '/marketing/' + page.slug
component: {
extends: MarketingComponent
data: function () {
return { page: page }
}
}
})
})
var router = new Router({
routes: routes
})

Si vous avez besoin d’ajouter une nouvelle route après que le routeur soit instancié, vous pouvez remplacer l’objet de concordance des routes du routeur par un nouveau contenant la route que vous souhaitez ajouter :

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

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'appel de router.on.

router.beforeEach changée

router.beforeEach fonctionne maintenant de manière asynchrone et prend une fonction de rappel next en tant que troisième argument.

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 renommée

Renommée en children pour plus de consistances entre Vue et les autres bibliothèques de routage.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options subRoutes.

router.redirect remplacée

C’est maintenant une option des définitions de route. Par exemple, vous devez mettre à jour :

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

par une définition comme ci-dessous dans votre configuration de routes :

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

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'appel de router.redirect.

router.alias remplacée

C’est maintenant une option des définitions de route que vous devrez mettre sous alias. Par exemple, vous devez mettre à jour :

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

par une définition comme ci-dessous dans votre configuration de routes :

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

Si vous avez besoin de plusieurs alias, vous pouvez aussi utiliser la syntaxe de tableau :

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

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'appel de router.alias.

Propriétés de route personnalisées remplacées

Les propriétés de route personnalisées doivent maintenant être imbriquées dans une nouvelle propriété meta pour éviter les conflits avec les fonctionnalités futures. Par exemple, si vous aviez défini :

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

Et bien vous devrez définir maintenant :

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

Puis quand vous accèderez à cette propriété pour une route, vous pourrez toujours y accéder via meta. Par exemple :

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

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de propriétés personnalisées non imbriquées dans meta.

Syntaxe [] pour les tableaux dans les QueryString retirée

Quand vous passez des tableaux à des paramètres de QueryString la syntaxe /foo?users[]=Tom&users[]=Jerry ne fonctionne plus. À la place, la nouvelle syntaxe sera /foo?users=Tom&users=Jerry. En interne $route.query.users sera toujours un tableau, mais s’il n’y a qu’un seul paramètre dans la query /foo?users=Tom, quand vous accèderez à cette route, il n’y aura aucun moyen pour le routeur de savoir si nous souhaitons que users soit un tableau. À cause de cela, il faut ajouter une propriété calculée et remplacer toutes les références de $route.query.users par cela :

export default {
// ...
computed: {
// `users` sera toujours un tableau
users () {
const users = this.$route.query.users
return Array.isArray(users) ? users : [users]
}
}
}

Concordance de routes

La concordance de routes utilise maintenant path-to-regexp pour fonctionner, ce qui la rend plus flexible que précédemment.

Un ou plusieurs paramètres nommés changés

La syntaxe a quelque peu changé, ainsi /category/*tags par exemple, doit être mis à jour pour /category/:tags+.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de syntaxe de route obsolète.

Liens

La directive v-link a été remplacée par le composant <router-link> car ce type de travail relève du domaine des composants dans Vue 2. Cela signifie que chaque fois que vous avez un lien comme celui-ci :

<a v-link="'/about'">À propos</a>

Vous devez le mettre à jour ainsi :

<router-link to="/about">À propos</router-link>

Notez que target="_blank" n’est pas supporté sur <router-link> donc si vous avez besoin d’ouvrir un lien dans un nouvel onglet, vous devez utiliser <a> à la place.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de directive v-link.

La directive v-link-active a été remplacée par un attribut de balise sur le composant <router-link>. Donc par exemple, vous devez mettre à jour ceci :

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

par ceci :

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

Le <a> sera dans ce cas le lien (et amènera sur l’adresse correcte), mais la classe active sera appliquée sur le <li> extérieur.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de directive v-link-active.

router.go changée

Pour plus de consistances avec l’API HTML5 History router.go est maintenant utilisé pour la navigation en arrière ou en avant alors que router.push est utilisé pour naviguer vers une page spécifique.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'utilisation de router.go là où router.push devrait être utilisé.

Options de Router : Modes

hashbang: false supprimée

Les hashbangs ne sont plus requis par Google pour le parcours d’URL, il ne sont donc plus l’utilisation par défaut (ou même une option) pour la stratégie de hash.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options hashbang: false.

history: true replacée

Toutes les options de mode ont été condensées dans un seule option mode. Mettez à jour :

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

avec :

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

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options history: true.

abstract: true remplacée

Toutes les options de mode ont été condensées dans un seule option mode. Mettez à jour :

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

avec :

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

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options abstract: true.

Options de Route

saveScrollPosition remplacée

Ceci a été remplacé par l’option scrollBehavior qui accepte une fonction, ainsi le comportement de défilement est complètement personnalisable, même par route. Ceci ouvre de nouvelles possibilités, mais pour simplement reproduire les anciens comportements :

saveScrollPosition: true

vous pouvez remplacer ça par :

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

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options saveScrollPosition: true.

root renommée

Renommée par base pour plus de consistances avec l’élément HTML <base>.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options root.

transitionOnLoad supprimée

Cette option n’est plus nécessaire maintenant que le système de transition de Vue a un contrôle de transition appear explicite.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options transitionOnLoad: true.

suppressTransitionError supprimée

Supprimée grâce à une simplification des hooks. Si vous devez réellement supprimer les erreurs de transition, vous pouvez utiliser trycatch à la place.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'options suppressTransitionError: true.

Hooks de Route

activate remplacée

Utilisez beforeRouteEnter dans le composant à la place.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de hook beforeRouteEnter.

canActivate remplacée

Utilisez beforeEnter dans le composant à la place.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de hook canActivate.

deactivate remplacée

Utilisez le beforeDestroy du composant ou le hook destroyed à la place.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de hook deactivate.

canDeactivate remplacée

Utilisez beforeRouteLeave dans le composant à la place.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de hook canDeactivate.

canReuse: false remplacée

Il n’existe plus de cas comme celui-ci dans le nouveau Vue Router.

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples d'option canReuse: false.

data remplacée

La propriété $route est maintenant réactive donc vous pouvez juste utiliser un observateur pour réagir au changement de route comme ceci :

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

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de hook data.

$loadingRouteData supprimée

Définissez votre propre propriété (par ex . isLoading) quand vous mettez à jour l’état de chargement d’un observateur sur une route. Par exemple, si vous récupérez les données avec axios :

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

Comment procéder ?

Lancez l'outil d'aide à la migration sur votre code pour trouver des exemples de propriété meta $loadingRouteData.