当前位置：首页 > article >正文

工作笔记：Vue 3 中使用 vue-router 进行导航与监听路由变化

article 2024/11/16 11:55:38

一、使用 useRouter 进行导航

在 Vue 3 组件中，你可以使用 useRouter 来方便地进行页面导航。以下是一个简单的示例：

<template>
  <button @click="navigateToHome">跳转到首页</button>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const navigateToHome = () => {
  router.push({ name: 'home' }); // 假设你已定义了名为 'home' 的路由
};
</script>

二、监听路由变化

有时我们需要在路由发生变化时执行某些操作，例如显示或隐藏某些元素。Vue 3 提供了 useRoute 来获取当前的路由状态，并使用 watch 来监听路由的变化。以下是一个示例：

<template>
  <div v-if="isShow">这是新增页面</div>
</template>

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

const route = useRoute();

const isShow = ref(false);

watch(() => route.name, val => {
  if (val === 'newPage') {
    isShow.value = true;
  } else {
    isShow.value = false;
  }
});
</script>

总结

通过上述代码，你可以：

使用 useRouter 进行导航：
- 导入 useRouter。
- 使用 router.push 方法进行页面跳转。
监听路由变化：
- 导入 useRoute 和 watch。
- 使用 watch 监听 route.name 的变化，并根据当前路由名称来更新组件状态。