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监听路由变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue prop传值类型检验方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要给大家介绍了关于vue3.0 sfc中setup变化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了如何修改vue-treeSelect的高度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了Vue中$bus的用法及$on、$off的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
vue elementUI select下拉框设置默认值(赋值)失败的解决
这篇文章主要介绍了vue elementUI select下拉框设置默认值(赋值)失败的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
今天小编就为大家分享一篇vue实现重置表单信息为空的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在vue项目中采用动态添加路由的方式,第一次进入页面会正常显示,但是点击刷新页面后会导致页面空白,所以下面这篇文章主要给大家介绍了关于vue3动态路由刷新后空白或者404问题的解决方法,需要的朋友可以参考下2022-07-07
key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧Nodes对比时辨识VNodes。这篇文章主要给大家介绍Vue中key的作用，感兴趣的朋友跟随小编一起看看吧2020-06-06
这篇文章主要介绍了vue如何根据不同的环境使用不同的接口地址问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
本文主要介绍了深入理解vue3中的reactive()，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
最新评论