vue router 如何监听

Vue Router 监听可以通过以下几种方式实现：1、使用全局导航守卫；2、使用组件内的导航守卫；3、使用 Vue Router 提供的事件。 下面我们将详细介绍这几种方法，并提供相应的代码示例和解释。

一、使用全局导航守卫

全局导航守卫是 Vue Router 提供的一种监听路由变化的方式，可以在路由跳转前或跳转后执行特定的逻辑。主要有三个钩子函数：beforeEach、beforeResolve 和 afterEach。

1. beforeEach: 在每个路由进入之前调用。
2. beforeResolve: 在导航被确认之前调用，所有组件内守卫和异步路由组件被解析之后调用。
3. afterEach: 在每次导航后调用。

import Vue from 'vue';

import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
  routes: [
    // 定义路由
  ]
});
router.beforeEach((to, from, next) => {
  console.log('全局前置守卫：导航到', to.path);
  next(); // 必须调用 next() 来执行路由跳转
});
router.beforeResolve((to, from, next) => {
  console.log('全局解析守卫：导航到', to.path);
  next();
});
router.afterEach((to, from) => {
  console.log('全局后置守卫：导航到', to.path);
});
export default router;

二、使用组件内的导航守卫

组件内的导航守卫主要包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 三个钩子函数，用于在路由进入组件、更新组件和离开组件时执行特定逻辑。

1. beforeRouteEnter: 在路由进入该组件之前调用。
2. beforeRouteUpdate: 在当前路由改变，但是仍然渲染该组件时调用。
3. beforeRouteLeave: 在导航离开该组件的路由时调用。

export default {

  name: 'ExampleComponent',
  beforeRouteEnter(to, from, next) {
    console.log('组件内前置守卫：导航到', to.path);
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log('组件内更新守卫：导航到', to.path);
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log('组件内离开守卫：离开', from.path);
    next();
  }
};

三、使用 Vue Router 提供的事件

Vue Router 提供了一些事件，可以通过事件监听来执行特定逻辑。这些事件包括 onReady、onError 和 onRouteChange 等。

1. onReady: 当路由器初始化完成时调用。
2. onError: 当路由器发生错误时调用。
3. onRouteChange: 当路由发生变化时调用。

const router = new Router({

  routes: [
    // 定义路由
  ]
});
router.onReady(() => {
  console.log('路由器已就绪');
});
router.onError((error) => {
  console.error('路由器发生错误：', error);
});
router.afterEach((to, from) => {
  console.log('路由变化：', to.path);
});
export default router;

四、使用 watch 监听路由对象的变化

在 Vue 组件中，可以使用 watch 属性来监听 $route 对象的变化，从而执行相应的逻辑。

export default {

  name: 'ExampleComponent',
  watch: {
    $route(to, from) {
      console.log('路由变化：从', from.path, '到', to.path);
    }
  }
};

五、使用导航守卫的高级用法

在实际开发中，可能会有一些复杂的场景需要处理，比如需要根据用户权限来决定是否可以访问某个路由。这时可以在导航守卫中进行一些复杂的逻辑判断。

router.beforeEach((to, from, next) => {

  const isAuthenticated = false; // 假设用户未登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

在上面的示例中，我们假设所有需要用户登录的路由都设置了 meta.requiresAuth 属性。如果用户未登录，则重定向到登录页面。

总结

通过以上几种方式，我们可以在不同的场景下监听 Vue Router 的变化，并执行相应的逻辑。根据具体需求，可以选择全局导航守卫、组件内导航守卫、Vue Router 提供的事件或 watch 属性来实现路由监听。这些方法的灵活运用，可以帮助开发者更好地控制应用的导航行为，提高用户体验。

建议：在实际开发中，应根据项目需求选择合适的路由监听方式，并注意优化代码，避免不必要的性能开销。此外，充分利用导航守卫的高级用法，可以提高应用的安全性和用户体验。

相关问答FAQs：

1. Vue Router如何实现路由监听？
Vue Router是Vue.js官方的路由管理器，它可以帮助我们实现前端路由的功能。要监听Vue Router的路由变化，可以使用它提供的导航守卫。

2. 如何使用导航守卫监听Vue Router的路由变化？
Vue Router提供了三个导航守卫：beforeEach、beforeResolve和afterEach。可以在路由配置中使用这些导航守卫来监听路由的变化。

在路由配置文件中，可以通过调用router.beforeEach来注册一个全局前置守卫，它会在每次路由切换前被调用。在这个守卫函数中，可以执行一些逻辑，比如判断用户是否登录、权限验证等。

router.beforeEach((to, from, next) => {
  // 在这里执行一些逻辑
  // 比如判断用户是否登录，如果没有登录则跳转到登录页
  if (!isLogin) {
    next('/login');
  } else {
    next(); // 继续路由导航
  }
});

类似地，可以使用router.beforeResolve注册一个全局解析守卫，它会在每次路由解析后被调用。而router.afterEach则是注册一个全局后置守卫，它会在每次路由切换后被调用。

3. 如何在Vue组件中监听Vue Router的路由变化？
除了使用导航守卫来监听路由变化，还可以在Vue组件中使用$route对象来监听当前路由的变化。

在Vue组件中，可以通过watch选项来监听$route对象的变化。例如，可以在组件的mounted钩子函数中添加如下代码：

mounted() {
  this.$watch('$route', (to, from) => {
    // 在这里执行一些逻辑
    console.log('路由变化了', to, from);
  });
}

在这个watch函数中，to表示切换后的路由对象，from表示切换前的路由对象。可以根据这些参数来执行一些逻辑，比如根据路由变化动态加载组件、更新页面标题等。