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
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')route add 添加路由
}else  if(mess=='2'){
router.push('/admin2')
}  else if(mess=='user'){
router.push('/')
// 管理员admin2不能够进去了，因为已经被删除了
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。