Vue实现路由监

Vue 实现路由监听的方法

在 Vue 中可以通过多种方式监听路由变化，以下是常见的实现方法：

使用 watch 监听 $route 对象

在 Vue 组件中可以直接 watch $route 对象来监听路由变化：

watch: {
  $route(to, from) {
    console.log('路由变化:', from.path, '->', to.path)
    // 在这里处理路由变化逻辑
  }
}

使用全局前置守卫 beforeEach

在 Vue Router 的配置中可以添加全局前置守卫：

const router = new VueRouter({...})

router.beforeEach((to, from, next) => {
  console.log('全局路由变化:', from.path, '->', to.path)
  // 必须调用 next() 才能继续路由跳转
  next()
})

使用全局后置钩子 afterEach

如果不需要在路由跳转前执行逻辑，可以使用后置钩子：

router.afterEach((to, from) => {
  console.log('路由跳转完成:', from.path, '->', to.path)
})

在组件内使用导航守卫

Vue Router 提供了组件内的导航守卫：

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被确认前调用
    next()
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    next()
  }
}

监听 popstate 事件

对于浏览器前进后退按钮触发的变化，可以监听 popstate 事件：

window.addEventListener('popstate', () => {
  console.log('浏览器历史记录变化')
})

注意事项

• 使用导航守卫时确保调用 next() 方法，否则路由跳转会卡住
• 在组件销毁时记得移除事件监听器，避免内存泄漏
• 对于复杂的路由逻辑，建议使用 Vuex 配合路由监听管理状态