vue3动态路由的addRoute和removeRoute使用

为什么需要有动态路由

有些时候，我们不同的身份角色，我们希望可以展示不同的菜单。
比如说:普通用户只有展示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>