vue route listening

During the development of vue projects, the routes of certain pages or global projects are often monitored, and certain operations are performed when the route changes. The following is a summary of several ways to monitor routes.

Routing listening method 1: Listen through watch

// Method 1. Listen to routing$routechangeexport default{
    watch: {
        $route(to, from){
            ('Route has changed')
            ('Current page routing:' + to);
            ('Previous route:' + from);
        },
    }
}// Method 2: Listen to routing$routeChange, use handler functionexport default{
    watch: {
        '$route': { // $routeYou can use quotes or without quotes
             Handler(to, from){
            ('Route has changed')
            ('Current page routing:' + to);
            ('Previous route:' + from);
            },
             deep: true, // Deep monitoring
             immediate: true, // You can listen to the first initial rendering}
    }
}// Method 3: Monitoring routing$routeChange, trigger the method in methodsexport default{
    watch: {
        '$route': 'initData'
    },
    methods: {
        initData(){
            ('Route has changed')
        }
    }
}// Method 4: Listen to the path changes of routesexport default{
    watch: {
        '$route.path'(toPath, fromPath){
            ('Route has changed')
            ('Current page routing address:' + toPath)
            ('Previous route address:' + fromPath)
         },
    }
}// Method 5. Listen to the path changes of the route, use the handler functionexport default{
    watch: {
        '$route.path': {
            handler(toPath, fromPath){
                ('Route has changed')
                ('Current page routing address:' + toPath)
                ('Previous route address:' + fromPath)
            },
             deep: true, // Deep monitoring
             immediate: true, // You can listen to the first initial rendering}
    }
}// Method 6: Listen to the path changes of the route and trigger the method in methodsexport default{
    watch: {
        '$route.path': 'initData'
    },
    methods: {
        initData(){
            ('Route has changed')
        }
    }
}

Route listening method 2: Listen through hook functions beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

export default{
    beforeRouteEnter(to, from, next){// Call this hook before rendering the component, so the component has not been created yet and cannot obtain this(this)// The result is: undefined('beforeRouteEnter')
        next()
    },
    beforeRouteUpdate(to, from, next){//This component is called when it is reused, such as a route with dynamic parameters: /foo/11 Jump to /foo/12(this)// This can be accessed('beforeRouteUpdate')
        next()
    },
    beforeRouteLeave(to, from, next){// It is called when the navigation leaves the current route, this can be accessed(this)// This can be accessed('beforeRouteLeave')
        next()
    },
}

Route listening method 3: Global route listening this.$

// Method 1. Do global routing monitoring in createexport default  {
    name:  'App',
    created() {
        this.$router.beforeEach((to, from, next) => {
            (to);
            (from);
            next()
        })
    }
}// Method 2. Do global routing monitoring in routing file (/router/)import Vue from 'vue'
import Router from 'vue-router'
(Router)

let routes = [
     {
       path: '/login',
       component: resolve => require(['@/views/login'], resolve),
     },
]

let router = new Router({
    mode: 'history', // Remove the url#
    scrollBehavior: () => ({ y: 0 }),
    base: .VUE_APP_BASE_DOMAIN,
    routes,
})

((to, from, next) => {
    (to);
    (from);
    next()
})

export {
    routes
    router
}

If you encounter other listening methods later, you will continue to add them