vue3监听路由的变化代码示例
更新时间：2023年09月10日 16:15:08 作者：回忆哆啦没有A梦
在vue项目中假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新,这篇文章主要给大家介绍了关于vue3监听路由的变化的相关资料,需要的朋友可以参考下
可以使用监听 router.currentRoute.value 的值,，来监听路由的变化。
使用：
引入：
import { useRouter} from 'vue-router'setup使用 :
const router = useRouter()
// 监听当前路由
watch(
() => router.currentRoute.value,
(newValue: any) => {
console.log('newValue',newValue)
},
{ immediate: true }
)控制台输出的值 newValue ：
如果我们只需要监听当前路由 name 的变化，就可以这么监听 router.currentRoute.value.name
const router = useRouter()
// 监听当前路由的name变化
watch(
() => router.currentRoute.value.name,
(newRouterName: any) => {
console.log('newRouterName',newRouterName)
},
{ immediate: true }
)Tips:
immediate:true //true 就表示会立即执行。（watch默认绑定，页面首次加载时，是不会执行的。只有值发生改变才会执行。所以不加 immediate:true //true 的话，首页不会触发要执行的方法）
deep:true //true 表示深度监听，这时候就能监测到newValue值变化
总结
到此这篇关于vue3监听路由的变化的文章就介绍到这了,更多相关vue3监听路由变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了计算属性和侦听器，文章以介绍计算属性、侦听器的相关资料展开详细内容,需要的朋友可以参考一下，希望对你有所帮助2021-11-11
在现代Web应用中,集成文档编辑功能变得越来越常见,特别是在协作环境中,能够直接在Web应用内编辑Word文档可以极大地提高工作效率,本文将详细介绍如何在Vue.js项目中集成Word在线编辑功能,需要的朋友可以参考下2024-08-08
这篇文章主要为大家详细介绍了Vue如何将页面导出成PDF文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
在Vue2项目中安装vue-i18n时,由于默认安装的是Vue3版本,导致报错,因此需要安装适合Vue2的版本,如8.x,以解决兼容性问题2026-04-04
这篇文章主要介绍了vue项目使用可选链操作符编译报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了ToB项目如何沉淀业务公共组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
Minio是一个灵活、高性能、开源的对象存储解决方案,适用于各种存储需求,并可以与云计算、容器化、大数据和应用程序集成,这篇文章主要给大家介绍了关于前端Vue通过Minio返回的URL下载文件实现的相关资料,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue百度地图修改折线颜色,添加icon和文字标注方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue-cli3 中跨域解决方案，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了在vue中封装方法以及多处引用该方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论