Vue|Vue Router清空历史记录 VueRouter清空历史记录

问题描述
当我们在浏览了多个页面之后，token到期。这时候系统应该强制用户登出，虽然用户登出了但如果不清除之前的浏览历史，点击浏览器的返回按钮，浏览器仍然会回退到之前的页面。
在之前的浏览了多少个页面不确定的情况下，想要清空浏览历史也比较麻烦。最主要按照我之前的思路，路由Router还不让清理。

let app = new Vue({ beforeCreate() { }, mounted(){ }, 'el': '#app', router, 'render': h => h(App) });

每个Vue应用都会创建一个Vue实例，然后给这个实例传入router参数。
【Vue|Vue Router清空历史记录】router中的内容非常简单，直接创建路由栈：

import Router from 'vue-router'; Vue.use(Router); export default new Router({ 'routes': [{ 'path': '/r', 'name': 'r', 'component': reportList }] })

这种方式的问题，在于导出后一旦挂载到Vue实例上，就不能修改router的内容。没有没有找到官方的实例说明，但是想要通过以下方式清空路由都会被拒绝。

//不可行 app.router.history = [] app.router = new Router()

解决办法
直到我在vue-router的github issues看到了这个回答，才解决了Vue应用清空浏览历史记录的问题。

文章图片

原文的代码我粘贴如下：

import Vue from 'vue' import Router from 'vue-router'Vue.use(Router)const createRouter = () => new Router({ mode: 'history', routes: [] })const router = createRouter()export function resetRouter () { const newRouter = createRouter() router.matcher = newRouter.matcher // the relevant part }export default router

在需要清空的历史记录的地方执行以下就可以了。