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