Vue Router中应对路由参数变动的策略（watch监听与导航守卫应用）

路由参数变动的探讨

在应用中利用路由参数，例如从路径 /user/foo 转向 /user/bar，原有的组件实例会被重用以提高效率，因为这两个路径共享同一组件。此机制虽提升了性能，但也意味着组件的生命周期钩子将不再触发，需要另寻他径监控此类变化。

监视路由参数变更策略

策略一：利用 Watcher 监听

方法一：直接在 watch 中定义对 $route 的监听，当路由变化时，自动执行对应的函数打印出新旧路由信息。

watch: {  $route(to, from) {    console.log('新路由:', to);    console.log('旧路由:', from);  }},

方法二：采用更详细的配置，通过 handler 函数响应变更，并可设置 deep: true 进行深度监听

watch: {  $route: {    handler(to, from) {      console.log('新路由:', to);      console.log('旧路由:', from);    },    deep: true  }},

方法三：绑定自定义方法处理路由变化，如 getPath。

watch: {  '$route': 'getPath'},methods: {  getPath(to, from) {    console.log('当前路由路径:', this.$route.path);  }},

实践案例

案例1：仅在查询参数 id 变化时触发初始化数据加载。

watch: {  '$route'(to, from) {    if (to.query.id !== from.query.id) {      this.id = to.query.id;      this.init(); // 重新加载数据    }  }},

案例2：进入路由或路由参数变化时立即执行 init 方法。

watch: {  '$route': {    handler: 'init',    immediate: true  }}

为了确保组件根据路由参数变化重新渲染，可为 <router-view> 添加唯一 key，如使用 $route.fullPath。

<router-view :key="$route.fullPath"></router-view>

策略二：应用导航守卫

beforeRouteEnter：在组件渲染前调用，因此时组件实例未创建，需通过 next(vm => {}) 访问实例。

beforeRouteEnter(to, from, next) {  console.log('进入前守卫触发');  next(vm => {    console.log('组件实例:', vm);  });},

beforeRouteUpdate：路由更新但组件复用时触发，可用于更新组件数据。

beforeRouteUpdate(to, from, next) {  console.log('路由更新守卫触发');  next();},

beforeRouteLeave：离开当前路由前调用，可进行确认提示等操作。

beforeRouteLeave(to, from, next) {  const isConfirmed = window.confirm('确定离开此页？');  if (isConfirmed) {    console.log('离开路由守卫确认离开');    next();  } else {    next(false); // 阻止导航  }},

以上方法确保了路由参数变化时，无论是通过监听还是守卫机制，都能有效地响应并执行相应的逻辑处理。