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监听中处理异步操作时需注意取消逻辑
• 路由变化频繁时建议添加防抖处理
• 避免在监听器中修改路由状态导致死循环

以上方法可根据实际需求选择单独使用或组合使用，全局守卫适合权限控制等通用逻辑，组件内监听更适合特定页面的业务处理。