Utilisation et précautions de Vue2.0 Vue-Router

Vue-Router est la bibliothèque de gestion de routage officiellement recommandée par Vue.js. Elle a été entièrement mise à niveau et optimisée dans la version Vue.js 2.0, la rendant plus facile à utiliser et plus efficace. Vue-Router est très pratique à utiliser, mais certains problèmes doivent être pris en compte lors de l'utilisation. Cet article présentera l'utilisation et les précautions de Vue-Router pour aider les développeurs à mieux utiliser Vue-Router.

1. Utilisation de base de Vue-Router

Vue-Router est un plug-in basé sur Vue.js, qui doit être installé et introduit avant utilisation. Vous pouvez utiliser npm pour installer Vue-Router directement :

npm install vue-router

Une fois l'installation terminée, introduisez Vue-Router dans l'application Vue :

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Vue.use(VueRouter) enregistrera une instance de routeur globale.

Configurez le routeur dans l'instance Vue :

import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

VueRouter est essentiellement un objet d'instance Vue utilisé pour gérer le routage Vue. Dans le code ci-dessus, nous avons créé une instance de VueRouter et transmis un tableau de configuration de routage (routes). Le tableau de configuration de routage contient des composants correspondant aux différentes routes de l'application.

Ajoutez un lien de routeur et une vue de routeur dans le modèle :

<div id="app">
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</div>

Dans VueRouter, vous devez utiliser le composant de lien de routeur lorsque vous sautez des itinéraires, et vous devez utiliser pour afficher le composant de vue du routeur du composant de routage actuel.

2. Routage dynamique et routage imbriqué

Vue-Router prend en charge le routage dynamique et le routage imbriqué, qui peuvent être configurés en fonction de différents besoins.

1. Routage dynamique

Le routage dynamique fait référence à la correspondance de routage basée sur des variables lors du routage, par exemple :

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

Dans cet exemple, / : id représente un paramètre correspondant, qui peut correspondre à différentes routes telles que /user/1, /user/2, etc., et transmettre les paramètres au composant correspondant.

2. Routage imbriqué

Le routage imbriqué fait référence à l'intégration d'un autre itinéraire dans un itinéraire, par exemple :

const router = new VueRouter({
  routes: [
    { path: '/user', component: User,
      children: [
        { path: '', component: UserHome },
        { path: 'profile', component: UserProfile },
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

Dans cet exemple, utilisez les enfants option pour définir une structure de routage imbriquée. La définition de la route enfant est similaire à la définition de la route parent, mais le chemin de la route enfant doit être ajouté après le chemin de sa route parent.

3. Fonctions de crochet de routage

Vue-Router fournit des fonctions de crochet de routage qui peuvent effectuer certaines opérations lors des sauts de routage.

1.beforeEach

Fonction Hook exécutée avant le saut de routage, peut être utilisée pour le contrôle des autorisations et l'interception des sauts, etc.

router.beforeEach((to, from, next) => {
  // to和from都是路由对象，to是即将跳转的路由对象，from是当前路由对象。
  // 如果需要跳转，必须调用next()。
  next()
})

2.afterEach

La fonction hook exécutée après le saut d'itinéraire peut être utilisée pour les opérations après le saut d'itinéraire.

router.afterEach((to, from) => {
  // to和from都是路由对象，to是即将跳转的路由对象，from是当前路由对象。
})

4. Notes

1 Vous devez utiliser le composant router-link lors des sauts de routage, n'utilisez pas la balise a.

2. Si vous devez transmettre des paramètres lors du routage, vous pouvez utiliser des paramètres de routage ou des paramètres de requête. Le nom de la variable correspondant au paramètre de routage doit être défini à l'aide de deux points (:) dans la définition du routage. .

3. Lors du saut, vous pouvez définir certaines métadonnées dans l'attribut méta de l'objet route, qui peuvent être utilisées dans la fonction de crochet de routage.

4. Si vous utilisez le mode historique HTML5, vous devez configurer et faire correspondre le routage côté serveur. Si elle n'est pas configurée, une page d'erreur 404 sera renvoyée lors de l'actualisation.

5. Résumé

Vue-Router est un plug-in important pour Vue.js, qui peut facilement gérer et contrôler le routage des applications Vue.js. Cet article présente l'utilisation de base et les précautions de Vue-Router. J'espère que les lecteurs pourront mieux maîtriser l'utilisation et l'application de Vue-Router.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!