关于javascript:Vue-Router清空历史记录

问题形容

当咱们在浏览了多个页面之后，token到期。这时候零碎应该强制用户登出，尽管用户登出了但如果不革除之前的浏览历史，点击浏览器的返回按钮，浏览器依然会回退到之前的页面。

在之前的浏览了多少个页面不确定的状况下，想要清空浏览历史也比拟麻烦。最次要依照我之前的思路，路由Router还不让清理。

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

每个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

在须要清空的历史记录的中央执行以下就能够了。

import {resetRouter} from './router';resetRouter() //执行办法

网上流传了很多清空记录的办法，都不彻底，甚至绝大部分都无奈实现清空的性能！这个答复是惟一能解决我的问题的答复。

参考文章

Remove existing routes：https://github.com/vuejs/vue-...