You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

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')
})

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.

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 a été 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)
)

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.

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'
}

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']

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) {
  // ...
}

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+.

Liens

v-link ^remplacée

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.

v-link-active ^remplacée

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.

Navigation par programmation

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.

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.

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'
})

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'
})

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 }
}

root ^renommée

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

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.

suppressTransitionError ^supprimée

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

Hooks de Route

activate ^remplacée

Utilisez beforeRouteEnter dans le composant à la place.

canActivate ^remplacée

Utilisez beforeEnter dans le composant à la place.

deactivate ^remplacée

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

canDeactivate ^remplacée

Utilisez beforeRouteLeave dans le composant à la place.

canReuse: false ^remplacée

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

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 () {
    // ...
  }
}

$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
      })
  }
}