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事件处理原理及过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue指令只能输入正数并且只能输入一个小数点的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
关于webpack-dev-server配置代理解决前端开发中的跨域问题
这篇文章主要介绍了关于webpack-dev-server配置代理解决前端开发中的跨域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要给大家介绍了关于Vue组件化常用方法之组件传值与通信的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要为大家介绍了Vue布置导航守卫获取用户信息，有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
本文介绍一个简单的DrawerLayout（类似Android的DrawerLayout）布局组件的实现，基于Vue.js侧滑菜单组件的实现代码大家通过本文一起学习吧2017-12-12
这篇文章主要介绍了Antd中单个DatePicker限定时间输入范围操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
虽然老早就看过很多echarts的例子， 但自己接触的项目中一直都没有真正用到过，直到最近才开始真正使用，下面这篇文章主要给大家介绍了关于在vue中添加Echarts图表的基本使用教程，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-11-11
在vue中经常会用到数据请求,下面这篇文章主要给大家介绍了关于Vue使用ajax(axios)请求后台数据的方法教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
本篇文章主要介绍了浅谈vue中数据双向绑定的实现原理 ，主要使用v-model这个数据双向绑定，有兴趣的可以了解一下2017-09-09
最新评论