# 方法一
第二次才生效
https://www.cnblogs.com/yangchin9/p/10857659.html (opens new window)
- route.js
{
path: '/',
name: 'login',
component: () => import('@/views/Home/login'),
meta: {
allowBack: false,
},
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- main.js
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);
}
store.dispatch('updateAppSetting', allowBack);
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- store.js
const state = {
allowBack: '',
};
const mutations = {
SET_BACK: (state, allowBack) => {
state.allowBack = allowBack
},
};
const actions = {
updateAppSetting({ commit, state }, allowBack) {
return new Promise((resolve, reject) => {
commit('SET_BACK', allowBack)
})
}
};
const store = new Vuex.Store({
state,
mutations,
actions
});
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- App.vue
mounted() {
this.allowBack = store.state.allowBack
window.onpopstate = () => {
if (!this.allowBack) { // 这个allowBack 是存在vuex里面的变量
history.go(1)
}
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 方法二
有可能影响别的页面
- utils.js
// 禁止页面后退
export function noBack() {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', () => {
history.pushState(null, null, document.URL);
});
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- 在禁止后退的页面
import { noBack } from '../../utils';
mounted(){
noBack();
}
1
2
3
4
2
3
4