Vue 3 中使用 vue-router 进行导航与监听路由变化的操作
作者：前端学步
在Vue3中,通过useRouter和useRoute可以方便地实现页面导航和路由变化监听,useRouter允许进行页面跳转,而useRoute结合watch可以根据路由变化更新组件状态,这些功能为Vue3应用增加了灵活性和响应性,使得路由管理更加高效
一、使用 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的变化，并根据当前路由名称来更新组件状态。
到此这篇关于Vue 3 中使用 vue-router 进行导航与监听路由变化的文章就介绍到这了,更多相关Vue 3导航与监听路由变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！