vue3界面使用router及使用watch监听router的改变
更新时间：2022年11月10日 11:08:38 作者：浩星
vue2中使用router非常简单，但是vue3中略微有些改变，通过本文讲解下他的改变，对vue3 watch监听router相关知识感兴趣的朋友一起看看吧
前言：
众所周知，vue2中使用router非常简单，但是vue3中略微有些改变，这里来罗列下他的改变。
1、路由跳转
vue2
this.$router.push('/')vue3
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({ path: "/" });2、页面使用watch监听router跳转
vue2:
watch: {
$route: {
handler: function (route) {
const query = route.query;
},
immediate: true,
},
},
vue3:
import { useRouter } from 'vue-router'
const router = useRouter()
watch(() =>
router.currentRoute.value.path,
(toPath) => {
//要执行的方法
const query = router.currentRoute.value.query;
},{immediate: true,deep: true})vue3使用watch监听当前路由变化
在某个.vue组件中使用watch就可以监听当前路由变化，从而进行逻辑操作
let router = useRouter()
// 监听当前路由变化
watch(
() => router.currentRoute.value,
() => {
console.log("路由变化了")
}
);到此这篇关于vue3中界面使用router，以及使用watch来监听router的改变的文章就介绍到这了,更多相关vue3 watch监听router内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue瀑布流组件实现上拉加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
应用会对用户的操作进行反馈，就叫响应式，数据变化会实时改变UI，就叫数据响应式，修改Vue实例中的数据时，视图会重新渲染，就是Vue的数据响应式2022-05-05
本文主要介绍了vue+el-select 多数据分页搜索组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-12-12
Mockjs是一个用于生成随机数据和拦截Ajax请求的库,可以与Vue和Axios结合使用,提高前端开发效率,通过在项目中引入Mock.js文件,可以模拟后端API,拦截Ajax请求并返回自定义响应,这种方法适用于在后端尚未开发完成时的前端开发测试2024-10-10
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
这篇文章主要介绍了使用Vue-scroller页面input框不能触发滑动的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
本篇文章主要介绍了如何在vue中使用ts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vant/vue跨域请求解决方案,需要的朋友可以参考下2022-12-12
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
这篇文章主要介绍了详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
$emit是Vue实例的一个方法,它用于触发自定义事件,本文主要为大家详细介绍了Vue如何使用$emit进行组件通信,感兴趣的小伙伴可以跟随小编咦学习一下2023-12-12
今天将从 Vue 的入口文件开始，看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里，感兴趣的小伙伴不要错过奥2021-09-09
最新评论