【vue

您所在的位置：网站首页 › vue清空history路由栈 › 【vue

【vue

2024-07-11 10:19| 来源: 网络整理| 查看: 265

问题描述

项目中新增了一个需求，需要在一项目中访问三个不同项目A，B，C，于是创建了一个工作台，在工作台中提供了几个项目的常用页面的链接，当点击A项目的页面，再返回工作台点击B项目的页面，会出现404的情况

原因

用户在工作台页面时并未获取到菜单，在点击页面时，我们会根据url中带有的项目地址，获取项目标识决定请求哪个链接获取相应菜单，获取菜单后，通过route.addRoutes向router实例动态添加了路由，同时添加了

{ path:'*', redirect:'/404', hidden:true }

将所有不存在router实例中的url重定向到404页面。用户在第一次点击了项目A的页面，再回到工作台，点击项目B的页面，此时router实例并没有清空，而router实例中还是项目A的菜单，找不到项目B的url，因此跳到了404的问题

解决方案

参考 addRoutes后，我换一个账号登录权限不一样了，怎么删除之前添加的的路由？快速重置vuex数据 - Vue

方案一：重置路由

参考PanJiaChen大神的说法，目前暂时没有remove routes的方法，所以现在的做法是退出登录之后刷新一下页面。于是在页面的created中增加location.reload，居然出现了页面不停刷新的情况，查看了上述参考文章，想了想也是，页面刚加载，进入created周期，就又调用了刷新的方法，于是开始了循环往复的刷新…，于是增加了判断，通过vuex判断，只有当路由存在的情况下才需要刷新，重置路由后，解决了问题

created() { if (this.$store.getters.addRouters.length > 0) { // 判断是否已经刷新 location.reload() } } 方案二：重置matcher

参考TY-LIU在上述问题中的回答，在addRoutes之前重置matcher 即可解决，不过我还没有尝试，matcher后续也要了解下。

const createRouter = () => new VueRouter({ linkActiveClass: 'active', mode: 'hash', base: './', routes: constantRouterMap }); const router = createRouter(); // 添加其他项目路由前，重置 matcher router.matcher = createRouter().matcher; router.addRoutes(store.getters.addRouters); 优化

上文提供了清空路由的方法，但是location.reload()方法会导致进入工作台的时候，页面会闪，体验也不太好。因此对项目流程进行了优化。其实在上述问题中，最根本的原因是菜单的动态获取时机有问题。 vue项目动态获取菜单，一般是在登陆时存储用户信息，获取菜单存入vuex，同时响应式的更新菜单栏；但是f5刷新时，vuex数据清空，因此需要在beforeEach中判断菜单是否存在，不存在需要重新拉取。由于beforeEach已经存在这一步骤，当时的思路是，从工作台进入页面时，将vuex中的路由信息清空，就会进入beforeEach中f5刷新的流程，然后完成菜单拉取，复用了代码，当时测试了代码没有问题，后来就出现了404的问题。仔细想了想，我在工作台先进行了跳转，在依赖beforeEach进行获取菜单，这个思路本身就有问题，如果是同一项目的跳转，router实例中存在该路径，当然可以正常跳转，然而如果是跳转到不同项目，router实例中不存在该路径，当然会跳转到404，因此有了方案三——

方案三：在工作台点击跳转事件中，先获取菜单，addRoutes完成后，再进行跳转

此时需要在工作台中判断当前跳转的项目是否与上一次跳转的项目一致。因此在beforeRouteEnter守卫中，获取上一次的路径，由于我们的项目标识符是写在url中，因此需要根据url用正则表达式获取项目标识符，获取后与上一次的项目标识符对比，若一致，说明已经获取过菜单，直接跳转即可，否则重新获取菜单再进行跳转，完美解决了问题！

【本文地址】

【vue

【vue

今日新闻

推荐新闻