How to block page fallback by vue
How to prevent page rollback?
After jumping into the page in VUE, there are many ways to prevent return. I will not list them one by one. I use the vue-prevent-browser-back third-party library to prevent page return. This method is super convenient to use.
Steps to use
1. Installation
The code is as follows:
npm install vue-prevent-browser-back --save
2. Introduction method
The code is as follows:
import preventBack from 'vue-prevent-browser-back';//Introduced separately within the component
3. Use examples
The code is as follows:
<template>
<div class="container">
<div class="container-text">
<p>Return to the previous page is prohibited！</p>
</div>
</div>
</template>
<script>
import preventBack from 'vue-prevent-browser-back';//Introduced separately within the componentexport default {
name: '',
props: {},
mixins: [preventBack],//Inject Block to return to the previous page components: {},
data() {
return {};
},
computed: {},
watch: {},
methods: {},
created() {},
mounted() {}
};
</script>The above introduces the use of vue-prevent-browser-back. After introducing it into the component, it is completed by adding **mixins: [preventBack]**. Isn't it simpler than other methods?
vue blocks page fallback (backspace key)
Native js method
<script language="javascript">
//Prevent page backing mounted when using vue (null, null, );
('popstate', function () {
(null, null, );
});
</script>Combining vuex method in vue
1. Add meta information to this route in the routing configuration, such as:
{
path: '/index',
component: Index,
meta: {allowBack: false}
}2. Get the state of allowBack in the global function, and update the allowBack value of vuex.
let allowBack = true // Give a default value trueif ( !== undefined) {
allowBack =
}
if (!allowBack) {
(null, null, )
}
('updateAppSetting', {
allowBack: allowBack
})**This code must be written after next(), because it is not the address of to before next(), which is a bit different from vue1.0.
What you get is not the address of to, so you have to spell it based on the information of to
3. The next step is the most core, write the onpopstate event in the mounted:
= () => {
if (!) { // This allowBack is a variable that exists in vuex (1)
}
}Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.