当前位置: 首页 > Web前端 > vue.js

VueRouter清除历史

时间:2023-03-31 22:06:30 vue.js

问题描述当我们浏览多个页面时,token过期。这时,系统应该强制用户退出。虽然用户已经退出,但是如果之前的浏览历史没有被清除,点击浏览器的后退按钮,浏览器还是会返回到之前的页面。之前浏览的页面数量不确定时,清除浏览历史也很麻烦。最重要的是按照我之前的想法,路由器是不允许清理的。letapp=newVue({beforeCreate(){},mounted(){},'el':'#app',router,'render':h=>h(App)});每一个Vue应用都会创建一个Vue实例,然后将router参数传给这个实例。router里面的内容很简单,直接创建路由栈:importRouterfrom'vue-router';Vue.use(Router);exportdefaultnewRouter({'routes':[{'path':'/r','name':'r','component':reportList}]})这种方法的问题在于,一旦导出并挂载到Vue实例上,就无法修改router的内容。没有找到官方的示例说明,但任何试图通过以下方法清除路由的行为都会被拒绝。//不可能app.router.history=[]app.router=newRouter()解决方案直到在vue-router的githubissues中看到这个答案,才解决了清除Vue应用浏览历史的问题。我将原始代码粘贴如下:)constrouter=createRouter()exportfunctionresetRouter(){constnewRouter=createRouter()router.matcher=newRouter.matcher//相关部分}exportdefaultrouter在需要清除历史记录的地方执行如下。import{resetRouter}from'./router';resetRouter()//执行方法网上流传的清除记录的方法有很多,但是都不彻底,甚至大部分都不能实现清除功能!这个答案是唯一解决我的问题的答案。参考文章Removeexistingroutes:https://github.com/vuejs/vue-...