为什么需要有动态路由
有些时候，我们不同的身份角色，我们希望可以展示不同的菜单。
比如说:普通用户只有展示A菜单，管理员有A,B,C菜单
这个时候，我们就需要动态路由了！
Vue2和vue3的区别
Vue2中可以通过路由的 addRoutes() 和 addRoute() 两种方法实现路由动态渲染，
但在Vue3中，废弃了 addRoutes() 方法，只保留了 addRoute() 单个添加路由配置
需求描述
现在我们有一个场景，假设登录的是用户是普通用户，我们展示默认页面。
普通用户不可以去访问管理员的页面。
管理可以访问所有的页面
假设普通用户只有一个页面index。
管理员有index, admin1， admin2
在router下的index.ts文件中配置普通用户和管理员的路由
import { createRouter, RouteRecordRaw, createWebHashHistory } from 'vue-router' // 普通用户的页面 const routes : Array <RouteRecordRaw> = [ { path: '/', redirect:'/index', name: 'index', component:()=>import('../views/teacher/index.vue'), }, ] // 管理员的页面，使用export暴露出去，等会动态添加 export const asyncRoutes = [ { path: '/admin1', name: 'admin1', component:()=>import('../views/teacher/admin1.vue'), }, { path: '/admin2', name: 'admin2', component:()=>import('../views/teacher/admin2.vue'), }, ] const router = createRouter({ history: createWebHashHistory(), routes }) // 暴露出去 export default router
需要动态判定路由的文件下做如下处理
<template> <!-- 放置路由容器 --> <h2>当前用户是 {{ userNmae}}</h2> <van-button type="primary" @click="changeHander">变为为管理员</van-button> <van-button type="primary" @click="admin1('1')">去管理员的页面1</van-button> <van-button type="primary" @click="admin1('2')">去管理员的页面2</van-button> <router-view></router-view> </template> <script setup lang="ts"> import { useRouter} from 'vue-router' import { asyncRoutes } from './router/index' import {ref} from 'vue' let router=useRouter() let dongtaiRoutes:any=asyncRoutes || [] let userNmae=ref('普通用户') const changeHander=()=>{ //添加动态路由哈 userNmae.value='管理员' for(let i=0;i<dongtaiRoutes.length;i++){ // 动态添加每一项路由哈。 //为什么要循环是因为addRoute值只能添加单个添加路由配置 router.addRoute(dongtaiRoutes[i]) } } // 前往不同的页面 const admin1=(mess:string)=>{ if(mess=='1'){ router.push('/admin1') }else{ router.push('/admin2') } } </script>
如何删除动态路由 removeRoute
router.removeRoute()通过名称删除现有路由。
name指的是路由的中的name.
下面我们将删除admin2的路由
removeRoute的使用
<template> <!-- 放置路由容器 --> <h2>当前用户是 {{ userNmae}}</h2> <van-button type="primary" @click="changeHander">变为为管理员</van-button> <van-button type="primary" @click="admin1('2')">去管理员的页面2</van-button> <van-button type="primary" @click="admin1('user')">变为普通用户</van-button> <router-view></router-view> </template> <script setup lang="ts"> import { useRouter} from 'vue-router' import { asyncRoutes } from './router/index' import {ref} from 'vue' let router=useRouter() let dongtaiRoutes:any=asyncRoutes || [] let userNmae=ref('普通用户') const changeHander=()=>{ console.log( router ) //添加动态路由哈 userNmae.value='管理员' for(let i=0;i<dongtaiRoutes.length;i++){ // 动态添加每一项路由哈 router.addRoute(dongtaiRoutes[i]) } } // 前往不同的页面 const admin1=(mess:string)=>{ if(mess=='1'){ router.push('/admin1') }else if(mess=='2'){ router.push('/admin2') } else if(mess=='user'){ router.push('/') // 管理员admin2不能够进去了，因为已经被删除了 router.removeRoute('admin2');//通过名称删除现有路由。 } } </script>
