动态添加路由 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 = 0
            navList.forEach(item => {
               item.text = text2[x]
               item.pushUrl=pushUrl2[x]
               x++
            });
        }
         if (store.state.user.userid==3) {
              userName.value = '管理员'
            let x = 0
            navList.forEach(item => {
               item.text = text3[x]
               item.pushUrl=pushUrl3[x]
               x++
            });
        }
          //   判断当前路由，定位到导航，防止刷新后消失
        navList.forEach(item => {
            item.isActive = false
            if (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)
                });
                // 首次跳入的页面 nav1
                if (to.path == '/home') {
                    next('/home/info')
                } else {
                    // 加入动态路由后，继续进行跳转
                    next({...to, replace: true })
                }
            } else
            if (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 })
                }
            } else
            if (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()
        }
    }

})