vue3watch路由

vue3中的watch可以监听路由变化，具体实现方式如下：

import { watch, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()

    onBeforeMount(() => {
      // 初始化时执行一次
      handleRouteChange(route.value)
    })

    watch(
      () => route.value,
      (to, from) => {
        handleRouteChange(to, from)
      }
    )

    function handleRouteChange(to, from) {
      // 处理路由变化
    }
  }
}

相关问题

vue3 watch 路由

以下是使用Vue3中的watch监听路由变化的例子：

<template>
  <div>
    <p v-if="showPage">This is a page</p>
    <p v-else>This is the home page</p>
  </div>
</template>

<script setup>
import { ref, watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
const showPage = ref(false)

watch(
  () => route.path,
  (val) => {
    if (val === "/") {
      showPage.value = false
    } else {
      showPage.value = true
    }
  }
)
</script>

在这个例子中，我们使用了Vue3中的`watch`函数来监听路由变化。我们首先使用`useRoute`函数获取当前路由信息，然后使用`ref`函数创建一个响应式变量`showPage`，用于控制页面是否显示。接着，我们使用`watch`函数监听路由的变化，当路由变化时，我们根据路由的值来判断是否显示页面。

vue3 watch监听路由

在 Vue 3 中，你可以使用 `watch` 函数来监听路由的变化。具体的步骤如下：

1. 首先，确保你已经安装了 `vue-router`，并且已经在项目中进行了配置。

2. 在 Vue 组件中，使用 `watch` 函数来监听 `$route` 对象的变化。

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

export default {
  setup() {
    const router = useRouter();

    watch(router.currentRoute, (to, from) => {
      // 在这里处理路由变化的逻辑
      console.log('路由发生了变化', to, from);
    });

    // 其他组件逻辑...

    return {
      // 返回组件需要的数据和方法
    };
  },
};

3. 在 `watch` 函数的回调函数中，你可以处理路由变化时的逻辑。`to` 参数表示当前导航到的路由对象，`from` 参数表示上一个路由对象。

这样，当路由发生变化时，你就可以在 `watch` 函数的回调函数中处理相应的逻辑了。