vue3清空路由历史

129 阅读1分钟

场景一:描述

当我们在浏览了多个页面之后,token到期。这时候系统应该强制用户登出,虽然用户登出了但如果不清除之前的浏览历史,点击浏览器的返回按钮,浏览器仍然会回退到之前的页面。

在之前的浏览了多少个页面不确定的情况下,想要清空浏览历史也比较麻烦。最主要按照我之前的思路,路由Router还不让清理

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的数值大家可以根据自己的需求减几。