javascript - Vue Single Page App verhindert, dass der Browser zurückkehrt?

Question

Web-App-Single-Page-Anwendung wird mit Vue Vue-Router geschrieben.

Einige Seiten müssen daran gehindert werden, zurückzugehen. Ich habe im Routing-Meta-Informations-Meta geschrieben, ob die aktuelle Seite zurückgehen kann, z.

Ich habe die Informationen und die Möglichkeit zum Deaktivieren der Rückkehr gefunden:
history.pushState(null, null, location.href)

Das vorherige Projekt verwendete vue1.0, die Lösung ist

1. 在全局的router.beforeEach 里面 判断当前路由的handler里面的allowBack变量是否为false
2. 如果为false 则 history.pushState(null, null, location.href)

Jetzt wechsle ich zu vue2.0, die ursprüngliche Methode funktioniert nicht mehr,

Das Problem ist jetzt, dass ich nicht weiß, wo ich den Code „history.pushState(null, null, location.href)“ ablegen soll.
Oder haben Sie andere Lösungen? Danke! !

---

Tatsächlich ist das Hauptverwendungsszenario folgendes:
Klicken Sie auf die Tableiste, um zu einer anderen Seite zu wechseln, und klicke auf die Tableiste, um zu Seite b zu gelangen. Ich kann nicht durch Drücken der Eingabetaste zu Seite a zurückkehren. aber ich kann zu Seite a gehen, indem ich auf die Tableiste klicke

Answer 1

自问自答.....
需求是：需要某个路由不能通过浏览器返回，同时不影响相互之间的切换
整理一下解决方法 和 使用方法：

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', {
    allowBack: allowBack
})

这段代码得写在next()的后面，因为写在next()前面location.href并不是to的地址，这点跟vue1.0有点不同

3.接下来就是最核心的了，在app.vue的mounted里面注册onpopstate事件：

window.onpopstate = () => {
    if (!this.allowBack) {    //    这个allowBack 是存在vuex里面的变量
        history.go(1)
    }
}

去掉history.pushState(null, null, location.href) 也能防止后退，但是组件会重新渲染，所以这部分也很关键

Answer 2

试试这样看看

//改写返回函数，返回的时候就会触发这个,
//你也可以直接监听浏览器的返回事件，定义一个变量就行了，逻辑跟这个差不多
Router.prototype.goBack = function () {
  this.isBack = true
  window.history.go(-1)
}

//假如当前页面是b页面，是由a页面点击过来的，现在b页面点击返回键，不能返回到a页面
router.beforeEach( (to, from, next) => {
    //一当点击返回键，那么to就是a页面，from就是b页面
    if(!from.meta.allowBack){
        //进行页面判断，取出history里面之前的url，对这个url进行判断，看他等不等于to这个页面
        //因为安全原因，js没法获取history里的url，或者获取麻烦，所以你就要自己来记住url
        //就是每进入一个页面，你都去把之前的页面路径存在sessionStorage中
        //···判断过程省略
        //这里取出，然后对比就可以了
        //如果等于的话，直接禁止
        //取出结果
        var path = sessionStorage.getItem('path');
        //这个this我没有实验，应是指向router
       if(path == to.path && this.isBack){
           //什么都不做，只要不执行next方法，路由是不会跳的
           this.isBack = false;
       } else {
           //否则的话，就代表不是点击的返回键，该跳转就跳转
           //这里也存储
            sessionStorage.setItem('path',from.path);
             this.isBack = false;
           next()
       }
    }else{
        //在这里存储
        sessionStorage.setItem('path',from.path);
        this.isBack = false;
        next();
    }
});