1 回答
TA贡献1841条经验 获得超3个赞
今天一搜 网上看到好几篇复制这个答案发的贴子或者文章,
出于我个人的思考 我觉得我还是要表个态(觉得我矫情也好较真也好 略略略~)
1.其实这个答案并不好,甚至是有问题的,
2.而且这个方案 并不是我一个人的成果,然而我之前的回答并没有说明,
啰嗦一下。。
以前去网上搜某种解决方案,发现铺天盖地的都是一样的文章。回去一试,发现是有问题的。。。那种心情。。。
所以也不希望自己的答案带来这种影响。。
自问自答.....
需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换
整理一下解决方法 和 使用方法:
1.在路由配置中给这个路由添加meta信息,比如:
{
path: '/home',
component: xxx,
meta: {allowBack: false}
}
2.在全局的router.beforeEach 函数里面获取allowBack的状态,同时更新vuex的allowBack的值,如:
let allowBack = true // 给个默认值true
if (to.meta.allowBack !== undefined) {
allowBack = to.meta.allowBack
}
if (!allowBack) {
history.pushState(null, null, location.href)
}
store.dispatch('updateAppSetting', { // updateAppSetting 只是store里面的一个action, 用来改变store里的allowBack的值的,具体怎么改这个值 要根据各位的实际情况而定
allowBack: allowBack
})
这段代码得写在next()的后面
3.接下来就是最核心的了,在app.vue的mounted里面写onpopstate事件:
window.onpopstate = () => {
if (!this.allowBack) { // 这个allowBack 是存在vuex里面的变量
history.go(1)
}
}
最后: 这个不是一个完美方法,在网页上初次会有闪烁,但对于嵌入原生app的网页,就我经过的项目来说还是可以用的。
看评论有很多人不成功,不知道是报错还是没有效果,我已经写得很清楚,实在想不出还有啥能写的了,抱歉了各位
再补充:
关于上面提到的初次闪烁,刚刚又去验证了一下:
在a页面刷新(beforeRouteEnter 中打印 a), // 这里log 打印了一个a
跳转到b页面(beforeRouteEnter 中打印 b,b页面allowBack 为false), // log 打印 b
点击返回键, // 此时log又打印了一个了a和一个b,但是页面还是回到b页面了的,这个过程很快,有时甚至看不到闪烁,可能跟页面的性能和复杂程度有关
随后的操作就没有发现上面的问题了,大家可以试试
添加回答
举报