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>