Technologie de contrôle et de gestion du routage dans Vue

Vue est un framework frontal très populaire. Il fournit un gestionnaire de routage pour un contrôle et une gestion pratiques du routage. Dans cet article, nous approfondirons la technologie de contrôle et de gestion du routage dans Vue pour aider les développeurs à mieux comprendre et appliquer ces technologies.

1. Bases de Vue Router

Vue Router est le gestionnaire de routage officiel de Vue.js. Il est profondément intégré au cœur de Vue.js et peut bien implémenter le contrôle de routage des applications d'une seule page. Vue Router implémente des mises à jour dynamiques des vues en gérant le mappage entre les routes et les composants, isolant efficacement l'état de la vue et des données, rendant la structure de l'application plus claire et plus facile à maintenir.

1.1 Installation et introduction

Avant d'utiliser Vue Router, vous devez l'installer via npm. Vous pouvez l'installer via la commande suivante :

npm install vue-router –save

Une fois l'installation terminée, vous devez introduire Vue Router dans l'application Vue et effectuer la configuration de base. Vous pouvez écrire le code suivant dans le fichier main.js :

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

Vue.use(VueRouter)

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue')
}, {
  path: '/contact',
  name: 'contact',
  component: () => import('./pages/Contact.vue')
}, {
  path: '*',
  redirect: '/home'
}]

const router = new VueRouter({
  mode: 'hash', // hash模式
  routes // 路由路径配置
})

new Vue({
  el: '#app',
  router, // 注册路由器
  render: h => h(App)
})

1.2 Navigation d'itinéraire

Vue Router fournit plusieurs méthodes de navigation d'itinéraire, notamment en utilisant la balise router-link pour naviguer, en sautant de pages, en attendant la fin de la navigation, etc. .

L'utilisation de la balise router-link dans un composant peut facilement implémenter la navigation d'itinéraire, comme indiqué ci-dessous :

<router-link to="/home">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/contact">联系我们</router-link>

De plus, la navigation par programmation peut également être utilisée pour implémenter des sauts d'itinéraire, comme indiqué ci-dessous :

// 基本路由跳转
this.$router.push('/home')

// 带参数的路由跳转
this.$router.push({
  name: 'about',
  params: {
    id: 20,
    name: '张三'
  }
})

// 跳转后执行异步操作
this.$router.push('/about', () => {
  console.log('路由跳转完成')
})

// 返回前一个路由
this.$router.go(-1)

// 返回到命名路由
this.$router.push({
  name: 'home'
})

1.3 Imbrication d'itinéraire

Vue Router prend en charge la configuration d'un routage imbriqué à plusieurs niveaux, ce qui permet d'obtenir un contrôle et une gestion de routage plus complexes. Par exemple, vous pouvez définir des sous-itinéraires et des sous-itinéraires imbriqués sous une route parent, comme indiqué ci-dessous :

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue'),
  children: [{
    path: 'intro',
    name: 'about-intro',
    component: () => import('./pages/AboutIntro.vue')
  }, {
    path: 'contact',
    name: 'about-contact',
    component: () => import('./pages/AboutContact.vue')
  }]
}]

Dans le composant de routage, vous pouvez utiliser la balise 975b587bf85a482ea10b0a28848e78a4 La route parent est un composant et la route enfant est rendue dans la balise 975b587bf85a482ea10b0a28848e78a4 de ce composant, comme indiqué ci-dessous :

<template>
  <div>
    <h2>关于我们</h2>
    <ul>
      <li><router-link :to="{ name: 'about-intro' }">公司简介</router-link></li>
      <li><router-link :to="{ name: 'about-contact' }">联系我们</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

2. Vue Router Advanced

En plus des fonctions de gestion de routage de base, Vue. Le routeur fournit également des fonctions avancées, telles que le passage des paramètres d'itinéraire, la protection d'itinéraire, le routage dynamique, etc. Dans cette section, nous décrivons l'utilisation et la mise en œuvre de ces fonctionnalités.

2.1 Paramètres de routage

Dans le développement réel, il est généralement nécessaire de transmettre certains paramètres au composant de routage, tels que les informations de l'utilisateur actuellement connecté, la liste des articles, etc. Dans Vue Router, les paramètres peuvent être transmis via les attributs props.

Comme indiqué ci-dessous, nous utilisons l'attribut props pour transmettre les paramètres lors de la définition de l'itinéraire :

const routes = [
  {
    path: '/user/:userId',
    name: 'User',
    component: User,
    props: true
  }
]

Dans le composant de routage, définissez props sur true pour transmettre les paramètres de routage en tant qu'attribut props du composant. Par exemple :

<template>
  <div>
    <h2>User Details</h2>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
  </div>
</template>

<script>
export default {
  props: ['user']
}
</script>

À ce moment, les paramètres de routage seront transmis au composant User en tant qu'attribut utilisateur, et le composant pourra obtenir ces paramètres via this.user.

2.2 Route Guard

Route guard est une fonction importante fournie par Vue Router, qui peut effectuer des opérations telles que la vérification des autorisations et le jugement de connexion pendant le processus de saut d'itinéraire. Vue Router propose trois types de gardes de route : les gardes globaux, les gardes exclusifs à la route et les gardes intra-composants.

Les gardes globales incluent beforeEach, beforeResolve et afterEach, qui sont interceptés avant le saut de routage, une fois le saut réussi et une fois que l'ensemble du processus de routage est terminé. Par exemple :

// 路由跳转前进行权限验证
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (authService.isAuthenticated()) {
      next()
    } else {
      next({
        name: 'login'
      })
    }
  } else {
    next()
  }
})

La garde exclusive de route peut être configurée lorsque la route est définie, ou elle peut être configurée à l'intérieur du composant. Par exemple :

const router = new VueRouter({
  routes: [{
      path: '/admin',
      component: Admin,
      children: [
        {
          path: 'dashboard',
          component: Dashboard,
          beforeEnter: (to, from, next) => {
            if (authService.isAdmin()) {
              next()
            } else {
              next({
                name: 'login'
              })
            }
          }
        }]
      }]
 })

Les gardes au sein du composant sont les fonctions beforeRouteEnter, beforeRouteUpdate et beforeRouteLeave définies dans le composant de routage. Par exemple :

export default {
  beforeRouteEnter(to, from, next) {
    console.log('进入路由组件')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('更新路由组件')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('离开路由组件')
    next()
  }
}

2.3 Routage dynamique

Le routage dynamique fait référence à la technologie de correspondance dynamique des itinéraires en fonction des paramètres d'URL. Vue Router fournit des capacités de correspondance dynamique basées sur les paramètres de routage et peut effectuer des sauts de routage et un rendu de composants en fonction de différents paramètres.

Par exemple, lors de la définition d'un itinéraire, vous pouvez spécifier les paramètres en utilisant les deux points ":", comme indiqué ci-dessous :

const routes = [
  {
    path: '/posts/:postId',
    component: Post,
    props: true
  }
]

À l'intérieur du composant, vous pouvez obtenir les paramètres de l'itinéraire via this.$route.params, comme indiqué ci-dessous :

export default {
  mounted() {
    console.log('PostComponent: ' + this.$route.params.postId)
  }
}

Lors du routage, vous pouvez utiliser la méthode $router.push pour effectuer une correspondance d'itinéraire dynamique, par exemple :

this.$router.push({
  path: '/posts/' + id
})

III Résumé

Cet article présente l'utilisation de base et les fonctions avancées de Vue Router, y compris la navigation d'itinéraire et imbrication des itinéraires, paramètres de routage, gardes de routage et routage dynamique, etc. Vue Router est un gestionnaire de routage important dans Vue.js, qui peut nous aider à mieux implémenter le contrôle de routage et la gestion des applications frontales. J'espère que cet article pourra vous inspirer et vous aider à mieux appliquer la technologie Vue Router pour le développement.

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!