Vue 阻止浏览器点击回退

发表于 | 更新于: | 分类于 | | 热度 ℃

前言

  • 在我们的开发过程中有时候一些页面并不喜欢被回退
  • 也不希望被退出去其他页面，比如登录了等就不给回退到登录页面等
  • 这时候我们应该着么做呢？第一时间我想起了路由守护
  • 每一次的切换都会进入到路由，但是具体着么做呢？我也借鉴了网上别人的方法
  • 现在实现了我把它记录下来

工具/资料

  • 系统 Mac os 10.13.3
  • 开发工具 vs code
  • 开发项目 vue

开始

第一步、锁定需要禁止回退的路由页面

  • 给需要守护的路由在 meta 添加 allowBack
  • 只要你那个页面不想让他回退了那你就添加就可以了
1
2
3
4
5
6
7
8
9
10
const Login = ()=> import( /* webpackChunkName: "login-page" */ '@/pages/Login')//登录

export default [
    {
        path: '/',
        name: 'Login',
        component: Login,
        meta: { allowBack: false }
    }
]

zz

第二步、配置全局路由守护

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 全局路由守护
router.beforeEach((to,from,next) => {
    let allowBack = true    //    给个默认值true
    // 有定义的就走路由定义了的数据
    if (to.meta.allowBack !== undefined) {
        allowBack = to.meta.allowBack
    }
    if (!allowBack) {
        history.pushState(null, null, location.href)
    }
    // vuex存储数据
    store.dispatch('updateAppSetting', {     //   updateAppSetting 只是store里面的一个action， 用来改变store里的allowBack的值的，具体怎么改这个值 要根据各位的实际情况而定
        allowBack: allowBack
    })

    // 登录守护
    if (to.name != 'Login' && (vuex.getters.getLoginKey()) != 'yhfkey') {
        next({name: 'Login'})
    }
    next()
})

第三步、编写 vuex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
}

// mutations
const mutations = {
    updateAppSetting(state,status) {
        state.allowBack = status.allowBack
    }
}

// actions
const actions = {
    updateAppSetting({commit}, status){
        commit('updateAppSetting', status)
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions
})

第四步、在 App.vue 编写最后的守护

  • 在 app 的 mouted 编写 onpopstate
1
2
3
4
5
6
7
8
mounted() {
  window.onpopstate = () => {
    if (!this.allowBack) {
      //    这个allowBack 是存在vuex里面的变量
      history.go(1);
    }
  };
}

后记

  • 全局路由守护拒绝浏览器回退就说到这里了，欢迎更多的同行大哥指导交流
  • 欢迎进入我的博客：https://yhf7.github.io/
  • 如果有什么侵权的话，请及时添加小编微信以及qq也可以来告诉小编（905477376微信qq通用），谢谢！
-------------本文结束感谢您的阅读-------------
0%