Vue 3 中使用 vue-router 进行导航与监听路由变化的操作
更新时间：2024年09月23日 15:07:17 作者：前端学步
在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导航与监听路由变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家分享一篇axios post提交formdata的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue3路由中path与redirect 的区别、使用场景及应用分析
在 Vue 3 的路由系统（Vue Router 4）中,path 和 redirect 是两个重要的概念,它们在路由配置中扮演着不同的角色,本教程将详细介绍它们的区别、使用场景以及实际应用示例,感兴趣的朋友一起看看吧2025-11-11
这篇文章主要为大家详细介绍了基于vue.js实现购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了简单实现vue中的依赖收集与响应的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
本文主要介绍了vue中html2canvas给指定区域添加满屏水印,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
这篇文章主要介绍了vue 代码压缩优化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
Vue3中element-plus全局使用Icon图标的过程详解
我们在用vue开发网站的时候,往往图标是起着很重要的作,这篇文章主要给大家介绍了关于Vue3中element-plus全局使用Icon图标的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
这篇文章主要探讨了在Vue中保持页面状态的问题,尤其是在单页应用（SPA）中常见的挑战,如滚动位置丢失、表单数据丢失和页面状态保存,提出了四种主要策略的相关资料2025-10-10
这篇文章主要为大家介绍了vue前端优雅展示后端十万条数据的考点剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
Vue 中 template 有且只能一个 root的原因解析(源码分析)
这篇文章主要介绍了Vue 中 template 有且只能一个 root的原因解析,本文从源码角度分析给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
最新评论