vue3清空路由历史

场景一：描述

当我们在浏览了多个页面之后，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应用清空浏览历史记录的问题。

image.png

原文的代码我粘贴如下：

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() //执行方法

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

场景二：描述

移动端开发经常会遇到一个问题，就是页面A->B ，B->C ，C->A首页后，如果用户点击返回键，还是会回到C，但是C页面往往是表单一类的操作或者带有页面参数，这时返回C页面一容易报错二特别影响使用效果，查了好多文章解决办法都不如意，history也没有直接清空路由栈的方法，所以只能手动清空路由栈，代码如下：

let backlen=history.length-1;
history.go(-backlen);

这段代码大家都可以看懂，其实所谓的跳到A页面其实是回退到A页面，将history中的路由栈回退掉，简单还不容易出错，backlen的数值大家可以根据自己的需求减几。

最后编辑于：2022.03.09 11:42:57