Vue implements the method of prompting to save and exit, and vue implements the SAVE and exit method.

Vue implements the method of prompting to save and exit, and vue implements the SAVE and exit method.

Assume that you need to edit the text on a page, but do not click Save and jump to the next route. A better way is to give a prompt-"Your edited content has not been saved. Are you sure you want to exit ?" If you click "OK", exit without saving the current content. If you click "cancel", cancel the route jump and continue to stay on the original page.

Incorrect practice

At the beginning, I wanted to use vuex with the beforeEach navigation guard of the vue router. The Code is as follows:

First, add a new state value-introduceState in vuex.

Const store = new Vuex. Store ({strict: true, // process. env. NODE_ENV! = 'Production ', directly modify the state and throw an exception state :{.... introduceState: false ,....}, getters: {introduceState: state => state. currentMenus}, mutations: {// update the value of introduceState changeIntroduceState (state, value) {state. introduceState = value }}})

The beforeDestroy function is triggered when you click to jump to another page. In this function, we can check whether the edited content is saved.

If the content has not been saved, a prompt box will pop up. When the user chooses to cancel, the introduceState value in vuex will be updated to true.

</Script> import {mapGetters, mapActions, mapMutations} from "vuex" export default {data () {return {contentHasSave: false // records whether the user has saved the content }}, methods :{... mapMutations ({changeIntroduceState: changeIntroduceState})}, beforeDestory: function () {if (! ContentHasSave) {// this. $ confirm ('You have not saved the description. Are you sure you want to raise it? ',' Hint ', {confirmButtonText:' OK ', cancelButtonText: 'cancel', type: 'warning '}). then () => {// Select OK, normal jump }). catch () => {// select to cancel this. changeIntroduceState (true)}) }}</script>

Finally, in the beforeEach navigation guard of the router, monitor from for all route jumps on the current page. When the introduceState of the state is true, use next (false) to cancel the route jump.

Import Vue from "vue"; import VueRouter from "vue-router"; import routeConfig from ". /routes "; import {sync} from" vuex-router-sync "; import store from ".. /store "; // load the routing middleware Vue. use (VueRouter) // define the route const router = new VueRouter ({routes: routeConfig, // mode: 'History '}) sync (store, router) router. beforeEach (to, from, next) =>{// the introduction is not submitted. Cancel the jump if (from. fullPath = '/adwords/introduce' & store. state. introduceState = not-save ') {next (false)}) export default router

This method is actually not feasible, because the beforeEach method is actually executed before the beforeDestory method of the component, that is, the value of introduceState is not updated to true during beforeEach execution.

Correct practice

Later, I went through the official documentation of vue router and found a wonderful method, that is, the navigation guard in the component.

Const Foo = {template: '...', beforeRouteEnter (to, from, next) {// called before the corresponding route for rendering the component is confirm // No! Yes! Obtain the component instance 'it' // because the component instance has not been created before the guard is executed}, beforeRouteUpdate (to, from, next) {// Changes in the current route, however, when the component is called again // For example, for a path with dynamic parameters/foo/: id, when the jump between/foo/1 and/foo/2, // component instances will be reused because the same Foo component will be rendered. This hook will be called in this case. // You can access the component instance 'eas'}, beforeRouteLeave (to, from, next) {// call when the corresponding route of the component is left in the navigation bar // you can access the component instance 'eas '}}

The above description is very clear, so I added a beforeRouteLeave Method to the js Code of the component, and then a prompt box is displayed to implement the function of saving the prompt and exiting.

</Script> export default {data () {return {contentHasSave: false // record whether the user has saved the content}, // navigation hook in the component, beforeRouteLeave: function (to, from, next) {if (this. buttonText = 'Submit') {next (false) this. $ confirm ('You have not saved the introduction. Are you sure you want to submit it? ',' Hint ', {confirmButtonText:' OK ', cancelButtonText: 'cancel', type: 'warning '}). then () =>{// Select OK next ()}) }}</script>

The implementation result is as follows:

The above vue implementation prompts that the method of saving and exiting is to share all the content with you. I hope to give you a reference, and I hope you can also support the help house.