Notes d'étude du document officiel de routage Vue

Notes d'étude du document officiel de routage Vue

Vue est un framework JavaScript progressif facile à utiliser qui peut nous aider à créer des applications monopage (SPA) plus facilement et plus rapidement. Parmi eux, Vue Router est un composant très important de Vue, principalement utilisé pour gérer le routage de l'ensemble de l'application. Cet article présentera les notes d'étude de la documentation officielle de routage Vue.

1. Premiers pas avec Vue Router

Tout d'abord, nous devons installer Vue Router via npm ou Yarn :

npm install vue-router

yarn add vue-router

Ensuite, nous l'installons dans main.js Présentez Vue Router et montez-le :

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

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

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Parmi eux, nous enregistrons Vue Router dans Vue via la méthode Vue.use(), puis créons une nouvelle instance VueRouter et définissons les règles de routage. À la fin, nous montons l'instance VueRouter sur l'instance Vue.

Ensuite, nous devons définir les composants correspondants pour les règles de routage, par exemple :

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

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

Dans le code ci-dessus, nous avons introduit les composants Home et About, et les avons ajoutés aux règles de routage dans lesquelles ils sont utilisés. Lors de l'accès au chemin racine, le composant Home est rendu, et lorsque le chemin /about est accédé, le composant About est rendu.

2. Saut d'itinéraire

Dans le processus d'utilisation de Vue Router, nous devons souvent effectuer des sauts d'itinéraire. Vue Router fournit une variété de façons d'implémenter des sauts de routage, tels que :

1 Implémenté via l'objet $route

Nous pouvons implémenter le routage via l'objet $route dans le fichier. composant Jump, par exemple :

this.$router.push('/about')

2 Implémenté via la classe $route.linkActive

Lorsque nous devons ajouter un style spécifique à l'itinéraire actuellement sélectionné dans la page, nous peut utiliser la classe $route.linkActive. Par exemple :

<router-link to="/" tag="li" active-class="active">Home</router-link>
<router-link to="/about" tag="li" active-class="active">About</router-link>

Dans le code ci-dessus, lorsque l'itinéraire actuel correspond à l'itinéraire spécifié, le style actif sera ajouté à l'élément d'itinéraire.

3. Implémentation via la navigation programmatique

Dans certains cas, nous devons effectuer des sauts d'itinéraire dans le code JavaScript, comme accéder à une page spécifiée après la soumission d'un formulaire. À l'heure actuelle, la navigation programmatique peut être utilisée pour implémenter des sauts de routage, par exemple :

// 使用命名路由跳转
this.$router.push({ name: 'about' })
  
// 使用路由参数跳转
this.$router.push({ path: '/user/123' })

3. Passer des paramètres aux composants de routage

Dans le développement réel, nous devons souvent transférer certains paramètres Passés d'un composant de routage à un autre composant de routage. Vue Router offre une variété de façons de transmettre des paramètres dans les composants de routage, telles que :

1 Via l'objet $route

Lorsque nous avons besoin d'obtenir des paramètres de routage dans les composants de routage. , vous pouvez utiliser l'objet $route.params, par exemple :

// 定义路由规则
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

// 在组件中获取路由参数
export default {
  methods: {
    goToUser(id) {
      // 参数传递方式1
      this.$router.push('/user/' + id)
      
      // 参数传递方式2
      this.$router.push({ path: '/user/' + id })
      
      // 参数传递方式3
      this.$router.push({ name: 'user', params: { id }})
    }
  }
}

// User组件中获取路由参数
export default {
  created() {
    const id = this.$route.params.id
  }
}

2 Implémenté via les paramètres de requête

les paramètres de requête sont un moyen plus flexible de transmettre des paramètres, qui peuvent Collez-le directement après l'URL et transmettez-le, par exemple :

this.$router.push({
  path: '/user',
  query: { id: 123 }
})

// User组件中获取query参数
export default {
  created() {
    const id = this.$route.query.id
  }
}

4. Fonction de crochet de routage

Vue Router fournit une variété de fonctions de crochet de routage qui peuvent nous aider à exécuter lorsque le routage modifie différentes opérations. Par exemple, nous pouvons vérifier l'état de connexion de l'utilisateur avant d'entrer dans le composant, ou effectuer des sauts de page lors des changements de routage.

1. Fonction de hook de routage global

La fonction de hook de routage global sera déclenchée lorsque le routage change dans l'ensemble de l'application, par exemple :

const router = new VueRouter({
  routes: [...],
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  if (to.meta.requireAuth && !store.state.isUserLogin) {
    next({ path: '/login' })
  } else {
    next()
  }
})

// 全局后置钩子
router.afterEach((to, from) => {
  // 页面跳转统计
  statistics(to.path)
})

Dans le code ci-dessus, nous définissons un front guard global via la méthode router.beforeEach() pour déterminer si l'utilisateur est connecté. Sinon, passez à la page de connexion. Certaines statistiques ou autres opérations peuvent être effectuées dans les hooks de publication globaux.

2. Fonction de hook de routage dans les composants

En plus des fonctions de hook de routage globales, Vue Router fournit également certaines fonctions de hook de routage au sein des composants, telles que beforeRouteEnter, beforeRouteLeave et beforeRouteUpdate . Par exemple, nous pouvons obtenir l'instance du composant dans la fonction de hook beforeRouteEnter et effectuer certaines opérations d'initialisation, telles que :

export default {
  beforeRouteEnter(to, from, next) {
    // 获取组件实例
    const vm = this
    
    // 发起异步请求
    getAsyncData().then(response => {
      // 将数据保存到组件的data中
      vm.data = response.data
      
      // 继续路由跳转
      next()
    })
  }
}

Dans le code ci-dessus, nous avons déclenché la fonction de hook beforeRouteEnter lorsque le composant entre dans la route. Lors de l'obtention de l'asynchrone Une fois les données enregistrées, les données sont enregistrées dans les données du composant et le saut de routage se poursuit via la méthode next().

Résumé :

Cet article présente principalement les notes d'étude du document officiel de Vue Router, y compris l'introduction de Vue Router, les sauts de routage, les paramètres de passage des composants de routage et les fonctions de hook de routage , etc. . J'espère qu'il sera utile pour tout le monde d'utiliser Vue Router dans le développement de Vue.

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!