Vue实现路由监

Vue 实现路由监听的方法

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

使用 watch 监听 $route 对象

通过 Vue 的 watch 功能可以监听 $route 对象的变化，适用于组件内部的路由变化监听。

export default {
  watch: {
    '$route'(to, from) {
      // to: 目标路由对象
      // from: 当前路由对象
      console.log('路由变化:', to.path, from.path);
    }
  }
}

使用全局前置守卫 beforeEach

通过 Vue Router 的全局前置守卫 beforeEach，可以在路由跳转前执行逻辑。

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

router.beforeEach((to, from, next) => {
  // to: 目标路由对象
  // from: 当前路由对象
  // next: 必须调用以继续路由跳转
  console.log('全局路由跳转前:', to.path, from.path);
  next();
});

使用全局后置钩子 afterEach

通过 afterEach 钩子可以在路由跳转完成后执行逻辑，适用于不需要干预路由跳转的场景。

router.afterEach((to, from) => {
  console.log('全局路由跳转后:', to.path, from.path);
});

在组件内使用导航守卫

组件内可以通过 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 监听路由变化。

export default {
  beforeRouteEnter(to, from, next) {
    // 组件渲染前调用
    console.log('进入路由前:', to.path, from.path);
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 当前路由改变但组件复用时调用
    console.log('路由更新:', to.path, from.path);
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 离开当前路由前调用
    console.log('离开路由前:', to.path, from.path);
    next();
  }
}

使用 $on 监听路由事件

Vue Router 提供了路由事件，可以通过 $on 监听特定事件。

this.$router.onReady(() => {
  console.log('路由初始化完成');
});

this.$router.onError((error) => {
  console.error('路由错误:', error);
});

注意事项

• 使用 watch 监听 $route 时，确保组件卸载时取消监听以避免内存泄漏。
• 全局守卫适用于所有路由跳转，逻辑复杂时需注意性能影响。
• 组件内守卫仅在特定组件中生效，适合局部逻辑处理。
• 路由事件适用于特定场景，如初始化完成或错误处理。

以上方法可根据实际需求选择组合使用，灵活应对不同场景的路由监听需求。