关于Vue动态路由参数变化,页面数据不更新问题？

最新推荐文章于 2024-07-09 10:35:29 发布

原创最新推荐文章于 2024-07-09 10:35:29 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#VueRouter #Vue

本文探讨了在前端开发中，路由参数切换时页面数据未能实时更新的问题，并提供了两种解决方案：一是利用watch监听路由参数变化；二是通过调整router-view的key属性实现数据更新。同时，文章还介绍了如何通过beforeRouteEnter和beforeRouteLeave钩子函数控制组件的存活状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情况分析：路由参数获取现在生命周期里，多次进行参数切换，页面不能够实时监听，导致页面数据不更新，
解决办法：①使用watch对路由进行监听（推荐）

watch: {
// 方法1
' $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots变化 if(this.$ route.params.articleId){

}
//方法2
' $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsmessage = this.$ route.query.msg
}
}
}
②给router-view 加key 属性

3.beforeRouteEnter: (to, from, next) = > { // 写在当前组件
to.meta.keepAlive = false
next()
},
beforeRouteLeave: (to, from, next) = > { //写在前一个组件
to.meta.keepAlive = false
next()
},