javascript - aplikasi halaman tunggal vue menghalang penyemak imbas daripada kembali?

Question

Aplikasi satu halaman aplikasi web ditulis menggunakan vue vue-router.

Sesetengah halaman perlu dilarang untuk kembali. Saya menulis sama ada halaman semasa boleh kembali dalam meta maklumat meta penghalaan, seperti allowBack.

Saya menemui maklumat dan cara untuk melumpuhkan kembali ialah
history.pushState(null, null, location.href)

Projek sebelum ini menggunakan vue1.0, penyelesaiannya ialah

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

Kini saya bertukar kepada vue2.0, kaedah asal tidak berfungsi lagi,

Masalahnya sekarang ialah saya tidak tahu di mana hendak meletakkan kod history.pushState(null, null, location.href)
Atau adakah anda mempunyai sebarang penyelesaian lain? Terima kasih! !

---

Sebenarnya, senario penggunaan utama adalah ini,
Klik bar tab untuk beralih ke halaman lain Jika saya berada di halaman a dan klik tabbar untuk pergi ke halaman b, saya tidak boleh kembali ke halaman a dengan menekan kekunci kembali. tetapi saya boleh pergi ke halaman a dengan mengklik bar tab

Answer 1

Soal jawab...
Syaratnya ialah: laluan tertentu tidak boleh dikembalikan melalui penyemak imbas, dan pada masa yang sama tidak menjejaskan pertukaran antara satu sama lain
Mari kita selesaikan penyelesaian dan penggunaan:

1. Tambahkan maklumat meta pada laluan ini dalam konfigurasi penghalaan, seperti:

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

2 Dapatkan status allowBack dalam fungsi penghala global.beforeEach, dan kemas kini nilai allowBack vuex pada masa yang sama, seperti:

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

Kod ini mesti ditulis selepas next(), kerana location.href ditulis sebelum next() bukan alamat kepada, yang berbeza sedikit daripada vue1.0

3 Langkah seterusnya ialah teras, daftarkan acara onpopstate dalam mounted in app.vue:

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

Mengalih keluar history.pushState(null, null, location.href) juga boleh menghalang pengunduran, tetapi komponen akan dipaparkan semula, jadi bahagian ini juga kritikal

Answer 2

Cuba ini dan lihat

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