Comment implémenter le routage dynamique et les gardes de routage dans Vue

Comment implémenter le routage dynamique et les gardes de routage dans Vue

Dans Vue, le routage est un concept très important, lié aux sauts de page, au contrôle des autorisations, etc. Cet article présentera comment implémenter le routage dynamique et les gardes de routage, et donnera des exemples de code spécifiques.

1. Routage dynamique

Le routage dynamique fait référence à la génération de différentes configurations de routage en fonction de différentes conditions ou paramètres. Le routage dynamique de Vue est implémenté à l'aide de Vue Router.

1. Installer Vue Router

Tout d'abord, nous devons installer Vue Router. Exécutez la commande suivante dans le répertoire racine du projet :

npm install vue-router

2. Configurer le fichier de routage

Créez un répertoire de routeur dans le répertoire src du projet, et créez un fichier index.js dans le répertoire de configuration du routage.

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: []
})

4. Générer dynamiquement des itinéraires

Nous pouvons obtenir une configuration de routage dynamique via l'interface backend ou d'autres méthodes, puis l'ajouter à la configuration de routage.

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

// 获取动态路由配置
// 假设通过接口获取到的路由数据为response.data
const dynamicRoutes = response.data

// 添加动态路由
router.addRoutes(dynamicRoutes)

export default router

Avec le code ci-dessus, nous pouvons générer dynamiquement des routes basées sur les données renvoyées par l'interface d'arrière-plan et les ajouter à la configuration de Vue Router.

2. Route guard

Route guard peut être utilisé pour contrôler l'accès de l'utilisateur à un certain itinéraire. Par exemple, l'utilisateur doit se connecter avant de pouvoir accéder à une certaine page. Vue Router fournit la fonction de garde de route.

Tout d'abord, nous devons comprendre plusieurs concepts liés aux gardes de route :

• Pré-garde globale : exécutée avant le changement de routage, elle peut être utilisée pour le contrôle global des autorisations et d'autres opérations.
• Garde exclusive d'itinéraire : elle n'est valable que pour un certain itinéraire et peut être utilisée pour le contrôle des autorisations locales et d'autres opérations.
• Gardes au sein d'un composant : valables uniquement pour un certain composant et peuvent être utilisés pour effectuer des opérations telles que le contrôle des autorisations au sein du composant.

1. Global front guard

Nous pouvons utiliser des gardes globales dans le fichier de configuration de routage (router/index.js). Par exemple, pour implémenter le contrôle des autorisations de connexion :

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  const isLogin = localStorage.getItem('isLogin')

  // 如果用户未登录，并且访问的页面需要登录权限，则跳转至登录页
  if (!isLogin && to.meta.requireAuth) {
    next('/login')
  } else {
    next()
  }
})

export default router

Dans le code ci-dessus, nous ajoutons des gardes frontales globales via la méthode router.beforeEach(). Dans cette garde, nous déterminons si l'utilisateur est connecté et effectuons les sauts correspondants en fonction de différentes situations. router.beforeEach()方法来添加全局前置守卫。在该守卫中，我们判断用户是否登录，并根据不同情况进行相应的跳转。

2. 路由独享守卫

除了全局前置守卫外，我们还可以为某个路由单独配置守卫。例如，实现管理员权限控制：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/admin',
      component: AdminComponent,
      meta: { requireAdmin: true } // 设置路由元信息
    }
  ]
})

export default router

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/admin',
      component: AdminComponent,
      meta: { requireAdmin: true } // 设置路由元信息
    }
  ]
})

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否为管理员
  const isAdmin = localStorage.getItem('isAdmin')

  // 如果用户不是管理员，并且访问的页面需要管理员权限，则跳转至首页
  if (!isAdmin && to.meta.requireAdmin) {
    next('/')
  } else {
    next()
  }
})

export default router

在以上代码中，我们给/admin路由配置了元信息meta.requireAdmin

Gardettes exclusives pour les itinéraires

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

export default router

// App.vue
<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  // 组件内的守卫：每次路由切换后滚动到顶部
  beforeRouteUpdate(to, from, next) {
    window.scrollTo(0, 0)
    next()
  }
}
</script>

Protections à l'intérieur des composants

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!