文章目录
动态添加路由案例初步动态添加路由-使用导航守卫解决刷新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》对你有帮助，请点赞、收藏，并留下你的观点哦！
