vue实现路由监听

路由监听的基本方法

在Vue中，可以通过Vue Router提供的导航守卫或监听$route对象来实现路由监听。以下是几种常见的方法：

使用watch监听$route对象 在Vue组件中，可以直接监听$route对象的变化，从而响应路由变化：

export default {
  watch: {
    '$route'(to, from) {
      console.log('路由从', from.path, '切换到', to.path);
      // 执行路由变化后的逻辑
    }
  }
}

使用beforeRouteUpdate导航守卫 对于动态路由（如/user/:id），可以使用beforeRouteUpdate守卫监听参数变化：

export default {
  beforeRouteUpdate(to, from, next) {
    console.log('路由参数从', from.params.id, '变为', to.params.id);
    next(); // 必须调用next()继续导航
  }
}

全局路由监听

使用router.beforeEach全局前置守卫 在Vue Router实例中，可以通过beforeEach注册全局前置守卫，监听所有路由跳转：

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

router.beforeEach((to, from, next) => {
  console.log('全局路由监听：从', from.path, '到', to.path);
  next(); // 必须调用next()
});

使用router.afterEach全局后置钩子 如果不需要拦截路由跳转，只需在路由跳转完成后执行逻辑，可以使用afterEach：

router.afterEach((to, from) => {
  console.log('路由跳转完成：从', from.path, '到', to.path);
});

监听路由参数变化

对于动态路由（如/user/:id），除了beforeRouteUpdate，还可以通过watch监听特定参数：

export default {
  watch: {
    '$route.params.id'(newId, oldId) {
      console.log('ID从', oldId, '变为', newId);
    }
  }
}

监听路由查询变化

如果需要监听查询参数（如/search?q=vue）的变化，可以通过watch监听$route.query：

export default {
  watch: {
    '$route.query.q'(newQuery, oldQuery) {
      console.log('搜索关键词从', oldQuery, '变为', newQuery);
    }
  }
}

监听路由哈希变化

如果路由使用了哈希（如/about#section），可以通过watch监听$route.hash：

export default {
  watch: {
    '$route.hash'(newHash, oldHash) {
      console.log('哈希从', oldHash, '变为', newHash);
    }
  }
}

注意事项

• 使用watch监听路由时，确保在组件销毁时取消监听（如果使用了非Vue内置的监听方式）。
• 导航守卫中必须调用next()，否则路由跳转会卡住。
• 对于动态路由，优先使用beforeRouteUpdate而非watch，因为后者可能在组件复用时失效。

以上方法涵盖了Vue中路由监听的常见场景，可根据实际需求选择合适的方式。