vue3动态路由的addRoute和removeRoute使用

2022-02-26 19:02:07 阅读：262 来源： 互联网

标签：import admin2 管理员 vue3 addRoute router 普通用户 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>

标签：import,admin2,管理员,vue3,addRoute,router,普通用户,removeRoute,路由
来源： https://www.cnblogs.com/IwishIcould/p/15940150.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9