vue实现路由监听
路由监听实现方法
在Vue中可以通过Vue Router提供的导航守卫或响应式属性监听路由变化，以下是具体实现方式：
使用全局前置守卫
在路由配置文件中添加beforeEach钩子，适用于全局路由跳转的监听：
import router from './router'
router.beforeEach((to, from, next) => {
console.log('路由变化:', from.path, '->', to.path)
// 可在此处添加权限校验等逻辑
next()
})组件内守卫监听
在组件内部使用beforeRouteEnter、beforeRouteUpdate等守卫：
export default {
beforeRouteEnter(to, from, next) {
console.log('进入组件前', to.path)
next()
},
beforeRouteUpdate(to, from, next) {
console.log('路由参数变化', to.params)
next()
}
}使用watch监听$route
在组件中通过watch监听路由对象变化：
export default {
watch: {
'$route'(to, from) {
console.log('路由路径变化:', to.path)
// 可访问to.query、to.params等
}
}
}使用Vue Router的afterEach钩子
适用于路由跳转完成后的监听，不会影响导航过程：
router.afterEach((to, from) => {
console.log('导航已完成:', to.path)
// 适合埋点统计等场景
})组合式API写法
在setup语法中使用onBeforeRouteUpdate等组合式API：
import { onBeforeRouteUpdate } from 'vue-router'
export default {
setup() {
onBeforeRouteUpdate((to, from) => {
console.log('路由更新:', to.fullPath)
})
}
}注意事项
- 导航守卫中的
next()必须被调用一次 - 在watch监听中处理异步操作时需注意取消逻辑
- 路由变化频繁时建议添加防抖处理
- 避免在监听器中修改路由状态导致死循环
以上方法可根据实际需求选择单独使用或组合使用，全局守卫适合权限控制等通用逻辑，组件内监听更适合特定页面的业务处理。
