javascript - L'application vue à page unique empêche le navigateur de revenir en arrière ?

Question

L'application Web monopage est écrite à l'aide de vue vue-router.

Il faut interdire le retour en arrière de certaines pages. J'ai écrit si la page actuelle peut revenir en arrière dans les méta-informations de routage, telles que AllowBack.

J'ai trouvé l'information et le moyen de désactiver le retour en arrière est
history.pushState(null, null, location.href)

Le projet précédent utilisait vue1.0, la solution est

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

Maintenant je passe à vue2.0, la méthode d'origine ne fonctionne plus,

Le problème maintenant est que je ne sais pas où mettre le code history.pushState(null, null, location.href)
Ou avez-vous d'autres solutions ? Merci! !

---

En fait, le scénario d'utilisation principal est le suivant :
Cliquez sur la barre d'onglets pour passer à une autre page. Si je suis actuellement sur la page a et que je clique sur la barre d'onglets pour accéder à la page b, je ne peux pas revenir à la page a en appuyant sur la touche retour, mais je peux accéder à la page a en cliquant sur la barre d'onglets Page

.

Answer 1

Question et réponse...
L'exigence est la suivante : un certain itinéraire ne peut pas être renvoyé via le navigateur, et en même temps n'affecte pas la commutation entre eux
Traitons les solutions et l'utilisation :

1. Ajoutez des méta-informations à cet itinéraire dans la configuration du routage, telles que :

{
    path: '/home',
    component: xxx,
    meta: {allowBack: false}
}

2. Obtenez le statut AllowBack dans la fonction globale router.beforeEach et mettez à jour la valeur AllowBack de vuex en même temps, par exemple :

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
})

Ce code doit être écrit après next(), car location.href écrit avant next() n'est pas l'adresse de to, ce qui est un peu différent de vue1.0

3. La prochaine étape est le noyau, enregistrez l'événement onpopstate monté dans app.vue :

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

La suppression de history.pushState(null, null, location.href) peut également empêcher le retour en arrière, mais le composant sera restitué, cette partie est donc également critique

Answer 2

Essayez ceci et voyez

//改写返回函数，返回的时候就会触发这个,
//你也可以直接监听浏览器的返回事件，定义一个变量就行了，逻辑跟这个差不多
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();
    }
});