Nuxt2中如何全局监听路由变化并执行指定操作？

你的插件代码仅在应用初始化时执行一次，无法触发每次路由切换。要实现全局监听路由变化，只需在插件中添加路由钩子或Vue实例的路由监听即可，无需修改每个布局。

方案一：使用Vue Router全局后置钩子 #

这是最直接的方式，利用Vue Router的afterEach钩子，每次路由切换完成后自动执行指定函数：

export default ({ app, route }, inject) => {
  // 定义路由变化时要执行的逻辑
  const handleRouteChange = (to, from) => {
    console.log('路由切换到:', to)
    console.log('路由从:', from)
    // 在这里添加你的Cookie追踪代码
  }

  // 页面首次加载时执行一次（可选，根据需求决定是否保留）
  handleRouteChange(route, null)

  // 注册全局路由后置钩子，监听所有路由切换
  app.router.afterEach(handleRouteChange)
}

方案二：使用Vue实例监听$route #

通过Vue的$watch方法监听应用实例的$route属性，同样可以实现全局监听：

export default ({ app }, inject) => {
  app.$watch('$route', (to, from) => {
    console.log('路由切换到:', to)
    console.log('路由从:', from)
    // 在这里添加你的Cookie追踪代码
  }, { 
    immediate: true // 配置immediate为true，初始化时立即执行一次监听逻辑
  })
}

两种方案都能实现全局监听路由变化的需求，无需逐个修改布局，任选其一即可。

内容的提问来源于stack exchange，提问作者Ryan H