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

一、使用 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>

总结

通过上述代码，你可以：

1. 使用 useRouter 进行导航：

   • 导入 useRouter。
   • 使用 router.push 方法进行页面跳转。

2. 监听路由变化：

   • 导入 useRoute 和 watch。
   • 使用 watch 监听 route.name 的变化，并根据当前路由名称来更新组件状态。

希望这篇笔记对你有所帮助！