vue3使用watch路由变化

在 Vue 3 中，你可以使用 `watch` 函数来监听路由的变化。下面是一个简单的示例：

首先，确保你已经安装了 Vue Router。

然后，在你的组件中，可以通过 `watch` 函数来监听 `$route` 对象的变化。`$route` 对象包含了当前路由的信息。

import { watch } from 'vue-router';

export default {
  mounted() {
    // 监听路由变化
    watch(
      () => this.$route,
      (to, from) => {
        // 处理路由变化的逻辑
        console.log('路由发生变化', to, from);
      }
    );
  }
}

在 `watch` 函数中，第一个参数是一个函数，用于返回需要监听的值。在这个例子中，我们监听的是 `$route` 对象。

第二个参数是一个回调函数，当被监听的值发生变化时，该回调函数会被调用。回调函数接收两个参数，分别是新的值和旧的值。在这个例子中，我们将新的路由对象 `to` 和旧的路由对象 `from` 打印出来。

这样，每当路由发生变化时，你都可以在回调函数中执行相应的逻辑。

希望这个例子对你有帮助！

相关问题

vue3中watch监听路由变化

在Vue3中，你可以使用`watch`来监听路由的变化。具体来说，你可以监听`router.currentRoute.value.path`来获取当前路由的路径，或者监听`router.currentRoute.value.name`来获取当前路由的名称。在监听过程中，你可以定义回调函数来处理路由变化时的逻辑操作。例如:

import { useRouter, watch } from 'vue-router'

const router = useRouter()

// 监听当前路由的路径变化
watch(
  () => router.currentRoute.value.path,
  (newValue, oldValue) => {
    console.log('路由路径变化：', newValue)
    // 执行其他操作
  },
  { immediate: true }
)

// 监听当前路由的名称变化
watch(
  () => router.currentRoute.value.name,
  (newRouterName, oldRouterName) => {
    console.log('路由名称变化：', newRouterName)
    // 执行其他操作
  },
  { immediate: true }
)

在以上代码中，我们使用`watch`函数来监听`router.currentRoute.value.path`和`router.currentRoute.value.name`的变化，并在回调函数中处理相应的逻辑。使用`immediate: true`可以使回调函数在页面首次加载时立即执行。

vue3 监听路由变化watch

Vue3 中监听路由变化通常使用 `vue-router` 提供的 `use routersubscription` 或者直接在组件中使用 `watch` 和 `beforeRouteUpdate` 生命周期钩子。

`useRouterSubscription` 是官方推荐的方式来监听路由变化，它返回一个函数，你可以将这个函数赋值给一个变量，然后在回调函数中处理路由改变：

import { useRouter } from 'vue-router';
const router = useRouter();
router.subscribe((to, from) => {
  // 当路由发生变化时，执行这里的逻辑
  console.log(`当前路由已切换到 ${to.path}`);
});

如果你是在组件内部监听，可以在 `beforeRouteUpdate` 钩子中获取新的路由信息：

export default {
  beforeRouteUpdate(to, from, next) {
    if (to.name !== from.name) {
      // 当路由名称发生改变时执行某些操作
      console.log('路由更新:', to);
    }
    next(); // 确保调用next()继续执行下一个生命周期阶段
  },
};