How to monitor vue routing

Scenario: When we are working on projects, we will encounter some requirements that eliminate routing switching to determine certain values. The following introduces some commonly used monitoring methods.

1. Monitoring through watch

// 方式1、监听路由 $route 变化  一般监听
export default{
    watch: {
        $route(to, from){
            console.log('路由变化了')
            console.log('当前页面路由：' + to.path);
            console.log('上一个路由：' + from);
        },
    }
}

// 方式2、监听路由 $route 变化, 使用handler函数 深度监听路由
export default{
    watch: {
        '$route': { // $route可以用引号，也可以不用引号  监听的对象
            handler(to, from){
            console.log('路由变化了')
            console.log('当前页面路由：' + to);
            console.log('上一个路由：' + from);
            },
            deep: true, // 深度观察监听 设置为 true
            immediate: true, // 第一次初始化渲染就可以监听到
        }
    }
}

// 方式3、监听路由 $route 变化,触发methods里的方法
export default{
    watch: {
        '$route': 'initData'
    },
    methods: {
        initData(){
            console.log('路由变化了')
        }
    }
}

// 方式4、监听路由的 path 变化
export default{
    watch: {
        '$route.path'(toPath, fromPath){
            console.log('路由变化了')
            console.log('当前页面路由地址：' + toPath)
            console.log('上一个路由地址：' + fromPath)
         },
    }
}

// 方式5、监听路由的 path 变化, 使用handler函数
export default{
    watch: {
        '$route.path': {
            handler(toPath, fromPath){
                console.log('路由变化了')
                console.log('当前页面路由地址：' + toPath)
                console.log('上一个路由地址：' + fromPath)
            },
            deep: true, // 深度监听
            immediate: true, // 第一次初始化渲染就可以监听到
        }
    }
}

// 方式6、监听路由的 path 变化,触发methods里的方法
export default{
    watch: {
        '$route.path': 'initData'
    },
    methods: {
        initData(){
            console.log('路由变化了')
        }
    }
}

2. Monitor through the hook functions beforeRouteEnter, beforeRouteUpdate, and beforeRouteLeave

export default{
    beforeRouteEnter(to, from, next){
        // 渲染该组件前调用这个钩子，因此组件还未被创建，不能获取this
        console.log(this) // 结果为：undefined
        console.log('beforeRouteEnter')
        next()
    },
    beforeRouteUpdate(to, from, next){
        //这个组件是被复用的时候调用，比如带有动态参数的路由跳转：/add/11 跳转到 /detail/12
        console.log(this) // 可以访问this
        console.log('beforeRouteUpdate')
        next()
    },
    beforeRouteLeave(to, from, next){
        // 导航离开当前路由的时候被调用，this可以被访问到
        console.log(this) // 可以访问this
        console.log('beforeRouteLeave')
        next()
    },
}

3. Global routing monitors this.$router.beforeEach

// 方式1、在App.vue的create中进行全局路由监听
export default  {
    name:  'App',
    created() {
        this.$router.beforeEach((to, from, next) => {
            console.log(to);
            console.log(from);
            next()
        })
    }
}

// 方式2、在路由文件（/router/index.js）中进行全局路由监听
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

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

let router = new Router({
    mode: 'history', // 去掉 url 中的 #
    scrollBehavior: () => ({ y: 0 }),
    base: process.env.VUE_APP_BASE_DOMAIN,
    routes,
})

router.beforeEach((to, from, next) => {
    console.log(to);
    console.log(from);
    next()
})

export {
    routes
    router
}