vue监听路由的方法

在Vue开发中，监听路由的变化是一项非常重要的功能。它可以让我们在路由发生改变时执行特定的逻辑，例如更新页面数据、记录用户行为等。下面将介绍几种常见的Vue监听路由的方法。

一、使用watch监听$route对象

在Vue组件中，可以使用watch选项来监听$route对象的变化。$route对象包含了当前路由的相关信息，如路径、参数等。当路由发生变化时，$route对象也会相应地更新。 示例代码如下：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    $route(to, from) {
      this.message = `从${from.path}跳转到${to.path}`;
    }
  }
};
</script>

二、使用beforeRouteUpdate导航守卫

beforeRouteUpdate是Vue Router提供的导航守卫之一，它会在当前路由改变，但是该组件被复用时调用。 示例代码如下：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  beforeRouteUpdate(to, from, next) {
    this.message = `从${from.path}跳转到${to.path}`;
    next();
  }
};
</script>

三、使用全局前置守卫

全局前置守卫可以在路由跳转前进行一些操作，例如权限验证、页面加载动画等。可以在创建Vue Router实例时，通过router.beforeEach方法来注册全局前置守卫。 示例代码如下：

const router = new VueRouter({
  routes: [...]
});
router.beforeEach((to, from, next) => {
  console.log(`从${from.path}跳转到${to.path}`);
  next();
});

通过以上几种方法，我们可以灵活地监听Vue应用中的路由变化，并根据需求执行相应的逻辑。在实际开发中，可以根据具体情况选择合适的方法来实现路由监听功能。