使用说明:
1、在router文件中引入并注册实例,js文件在最下方
import History from "./history.js";
History.setRouter(router);
2、在router.beforeEach中调用判断方法: canBack()
,并将返回值放入 next()
方法中
router.beforeEach((to, from, next) => {
let flag = History.canBack(from);
next(flag);
});
3、在需要限制返回的路由的meta中添加backFlag
routes: [
{
path: '/',
name: 'homePage',
component: HomePage,
meta: {
backFlag: false
}
},
]
4、调用使用vue自带 this.$router.go(n)
即可
5、如需更改:this.$route.meta.backFlag = true
history.js文件
const History = {
router: null,// 路由实例
// 保存当前路由实例
setRouter(router) {
router.isBack = false;// 初始化页面返回flag
this.router = router;
},
// true--跳转&&允许返回,false--不允许返回
canBack(from) {
let flag = true;// 默认允许跳转
// 判断是否为不允许返回页面
if (this.router.isBack && from.meta.backFlag == false) {
flag = false;
}
// 重置页面返回flag
this.router.isBack = false;
return flag;
}
}
// 重定义浏览器返回事件
window.onpopstate = () => {
History.router.isBack = true;
}
export default History;