9.路由监听方式

通过 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('路由变化了')
        }
    }
}