Vue实现路由监

Vue实现路由监听的方法

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

使用Vue Router的全局前置守卫

router.beforeEach((to, from, next) => {
  console.log('路由从', from.path, '变化到', to.path)
  next()
})

使用Vue Router的全局后置钩子

router.afterEach((to, from) => {
  console.log('路由已从', from.path, '切换到', to.path)
})

在组件内使用watch监听$route

export default {
  watch: {
    '$route'(to, from) {
      console.log('路由变化:', from.path, '->', to.path)
    }
  }
}

使用Vue Router的onReady方法

router.onReady(() => {
  console.log('初始路由:', router.currentRoute.path)
})

在组件内使用导航守卫

export default {
  beforeRouteEnter(to, from, next) {
    console.log('组件进入前', from.path, '->', to.path)
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('路由更新', from.path, '->', to.path)
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('离开当前路由', from.path, '->', to.path)
    next()
  }
}

路由监听的应用场景

• 页面访问权限控制
• 页面浏览统计
• 路由变化时重置组件状态
• 根据路由参数动态加载数据

注意事项

• 避免在路由监听中执行耗时操作
• 确保在守卫中调用next()方法
• 对于需要响应路由参数变化的情况，优先使用watch监听$route
• 全局守卫适用于所有路由，组件内守卫只对当前组件有效