Vue project router need to return twice in the problem and solve

Requirement: Jump to page B by page A, jump to page C by page B, jump to page B by page C, A-B-C-B
Use $router.replace C to jump to B. This method does not add a new record to the history, A-B-B

this.$router.replace(name:'B');

This will appear when B returns to A, it needs to click return twice to jump to A, B-B-A
So use the router.go(-1) method to return once when B returns to A to solve the problem, B-A

this.$router.go(-1);

Actual: listen for the presence of parameters in the route jump on the B page, and then refresh the data

// A Page
this.$router.push(name:'B');
// B Page
this.$router.push(name:'C');
watch: {
        // Listening Modify Return to the view page after viewing when the history of the automatic router minus one page
        $route:{
            handler(val) {
                if(val.params.freshen){
                    this.loadData();
                    this.$router.go(-1);
                }
            },
            immediate: true
        }
},
// C Page
this.$router.replace({
        name: 'B',
        params:{
          freshen: "true"
        }
})

Leave a Reply