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 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é des informations selon lesquelles la méthode pour désactiver le retour en arrière est history.pushState(null, null, locate...

给我你的怀抱 · Answer

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

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