动态添加路由 addRoute添加路由刷新404

文章目录

动态添加路由
案例
- 初步
- 动态添加路由-使用导航守卫
- 解决刷新404问题
- 完整代码：

动态添加路由

大概简而言之，就是需要路由是可以按照项目需求进行配置添加的，而不是一开始就配置好的。
就好比，一般的静态配置的路由时直接在routes里面进行配置，
但是动态路由是通过 router.addRoute() 进行配置，

注意：vue3删除了addRoutes()，只能addRoute()一条一条进行加入,写addRoutes()是无效的。

案例

此处的登录网页，有三个身份【学生】【老师】【管理员】

这三个身份权限不同，登录进去后显示的导航/页面也会不同。这个时候就需要判断权限，然后按需求动态的添加路由。

初步

在导航对应的组件里，先存上三个身份对应的导航信息（一般这个数据是可以从后端拿的，但是我们后端没写这个哈哈哈哈）

//页面所需要展示的导航
const navList=reactive([ //默认的数据是学生导航{id:1,imgUrl:"./static/imgs/nav1.png",imgUrlAfter:"./static/imgs/nav1after.png",text:'个人信息',isActive:true,pushUrl:'studentinfo'},{id:2,imgUrl:"./static/imgs/nav2.png",imgUrlAfter:"./static/imgs/nav2after.png",text:'课程管理',isActive:false,pushUrl:'schedulingtable'},{id:3,imgUrl:"./static/imgs/nav3.png",imgUrlAfter:"./static/imgs/nav3after.png",text:'作业管理',isActive:false,pushUrl:'task'},{id:4,imgUrl:"./static/imgs/nav4.png",imgUrlAfter:"./static/imgs/nav4after.png",text:'考勤记录',isActive:false,pushUrl:'attendance'},{id:5,imgUrl:"./static/imgs/nav5.png",imgUrlAfter:"./static/imgs/nav5after.png",text:'请假管理',isActive:false,pushUrl:'studentLeave'},{id:6,imgUrl:"./static/imgs/nav6.png",imgUrlAfter:"./static/imgs/nav6after.png",text:'成绩管理',isActive:false,pushUrl:'score'},{id:7,imgUrl:"./static/imgs/nav7.png",imgUrlAfter:"./static/imgs/nav7after.png",text:'修改密码',isActive:false,pushUrl:'adminModifyPasswordPopup'}])//老师导航const text2 = reactive(['个人信息','课程表','作业管理','考勤记录','请假管理','综合评分','修改密码'])//管理员导航const text3 = reactive(['个人信息','课程管理','项目组','考勤管理','请假管理','综合评分','修改密码'])

然后在登录的时候，会保存用户登录的信息。
还是在这个组件中，获取登录时保存的信息，判断此用户的身份，然后再根据身份权限进行展示导航的信息。

由于学生导航是默认的所以不需要判断

 onMounted(()=>{// 判断身份，显示不同的nav描述// console.log(store.state);if (store.state.user.userid==2) {userName.value = '老师'let x = 0navList.forEach(item => {item.text = text2[x]item.pushUrl=pushUrl2[x]x++});}if (store.state.user.userid==3) {userName.value = '管理员'let x = 0navList.forEach(item => {item.text = text3[x]item.pushUrl=pushUrl3[x]x++});}//   判断当前路由，定位到导航，防止刷新后消失navList.forEach(item => {item.isActive = falseif (item.pushUrl===route.fullPath.split('/')[1]) {item.isActive = true}});if (route.fullPath=='/home') {navList[0].isActive = true}})

动态添加路由-使用导航守卫

在导航守卫中添加，点击登录就会跳转到 /home 路由。

然后在导航守卫进行拦截，判断用户身份，是学生就router.addRoute( ’ 学生路由’ ) 老师管理员皆是同理，只不过得注意，需要遍历学生路由进行addRoute ()

解决刷新404问题

但是如果只addRouter()，那么你在登录进去后，一旦刷新页面，也许页面就会丢失，404。
因为刷新后，路由重新初始化，动态添加的路由此时已不存在，只有一些固定的公共路由（比如登录页面）还在，所以出现了404的情况。
这是肯定不能的，总不能不让用户刷新吧。
解决办法： 将动态添加的路由存在vuex中，因为页面刷新vuex也会清空。所以就可以理解为，vuex中没有动态路由，就代表页面刷新了，需要重新添加路由。如果vuex中存在，就正常跳转。
重要部分代码解释：

完整代码：

import routes from './routers' //公共路由
import routersAdmin from './routersAdmin'
import routersStudent from './routersStudent'
import routersTeacher from './routersTeacher'
const router = createRouter({history: createWebHistory(),routes: routes, //引进的routes.js
})
router.beforeEach((to, from, next) => {// nprogress.start() //进度条// 在登录页 清除信息if (to.path == '/login') {localStorage.clear('USERID')localStorage.clear('USERINFO')localStorage.clear('TOKEN')store.dispatch('getUserId')store.dispatch('getLogin')next()}// 判断是否登录if (store.state.user.userid == null) {// 不是登录的路由 不跳转if (to.path != '/login') {next({ path: '/login' })} else {next()}} else {// addRoute的加入路由，刷新就会消失，所以此时需要重新加入路由// 判断vuex的addRouters是否为空，若为空 动态路由未加入（刷新后/初始化） 一定要有一个条件，不然会陷入死循环if (store.state.user.addRouters.length == 0) {// 判断权限if (store.state.user.userid == 1) {// 派发action存动态路由store.dispatch('generateRoutes', routersStudent)routersStudent.forEach(route => {router.addRoute(route)});// 首次跳入的页面 nav1if (to.path == '/home') {next('/home/info')} else {// 加入动态路由后，继续进行跳转next({...to, replace: true })}} elseif (store.state.user.userid == 2) {store.dispatch('generateRoutes', routersTeacher)routersTeacher.forEach(route => {router.addRoute(route)});if (to.path == '/home') {next('/home/info')} else {// 加入动态路由后，进行跳转next({...to, replace: true })}} elseif (store.state.user.userid == 3) {store.dispatch('generateRoutes', routersAdmin)routersAdmin.forEach(route => {router.addRoute(route)});if (to.path == '/home') {next('/home/info')} else {// 加入动态路由后，进行跳转next({...to, replace: true })}}} else {// 若addRouters是不为空，则是正常路由跳转(没有进行刷新操作)// nprogress.done();next()}}})

动态添加路由 addRoute添加路由刷新404相关推荐

vue动态路由添加，vue-router的addRoute方法实现权限控制，添加根路由和子路由
addRoute 路由分为静态路由和动态路由静态路由和动态路由的优缺点动态路由实现思路: 动态路由遇到的问题与解决方式动态添加子路由路由分为静态路由和动态路由静态路由和动态路由的优缺点 1. ...
vue动态路由添加后刷新显示空白页或404
刷新显示空白页面原因:页面刷新会导致vuex数据丢失,所以无法动态添加路由 1.在store user.js state中添加字段isAddRoutes:false,用来判断是否已经添加完动态路由的 ...
Vue 动态路由，使用 addRoute 添加(分享)
文章目录 1. 静态路由 1.1 概述 1.2 代码实现 2. 动态路由 2.1 概述 2.2 代码实现 1. 静态路由 1.1 概述已经确定了路由的数量(一般是侧边栏的路由),最开始可以把路由表配 ...
vue路由添加.html,怎么使用VueRouter的addRoutes方法实现动态添加用户的权限路由
怎么使用VueRouter的addRoutes方法实现动态添加用户的权限路由发布时间:2021-04-26 13:34:44 来源:亿速云阅读:76 作者:小新小编给大家分享一下怎么使用VueR ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
bond添加路由_配置路由通信
两台主机两个路由设备通信现有主机A和主机B,且中间有两个路由设备连接,主机A的IP地址为192.168.1.100/24,主机B的IP地址为10.0.0.100/8,路由R1与主机A相连,且有两个接 ...
Vue动态路由路径重复以及刷新丢失页面问题
1.使用router.addRoutes(teacherRouter);添加完路由切换路由时,vue会警告路由名字重复问题出现原因是:动态路由添加时调佣addRoutes();它只会帮你注入路由,不 ...
Vue.js-Day05【安装路由（vue-router）、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.单页面应用 1.1.多页面应用 1.2.单页面应用 1.3.vue-router 2.安装vue-rout ...
vue 创建项目并添加路由（Vue路由入门教学，图文详解）
注:初学vue,如有错误.请指教,谢谢! 1.vue-cli 1.1 介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 1.2 下载vue-cli 在命令行下运行 npm ins ...