Vue 跳转相同路由不同参数,解决页面数据不自动刷新
vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是应该是路径之间的切换,也就是组件的切换因此,如果需要跳转相同路由不同参数时,必须确保组件需要重新被渲染...
·
- vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。
- 传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是应该是路径之间的切换,也就是组件的切换
- 因此,如果需要跳转相同路由不同参数时,必须确保组件需要重新被渲染
Duang,最近搭建了一个自己的博客小破站,欢迎各位小伙伴来访吖:
ares-coder-blog-portalhttps://www.ares-stack.cn/blog_service/#/game
其中的一种方法:
复用组件时,想对路由参数的变化作出响应的话,可以 watch(监测变化) $route 对象
场景:
created() {
this.initData();
/** 初始化其他 */
let pId= this.$route.params.pId;
if(pId){
this.initOther(pId);
}
},
watch: {
//监听相同路由下参数变化的时候,从而实现异步刷新
'$route'(to,from) {
//做一些路由变化的响应
//打开加载动画
this.loading = true;
//重新获取数据
this.initData();
/** 初始化其他数据 */
let pid= this.$route.params.pid;
if(pid){
this.initOther(pid);
}
},
},
如果引入了子组件,子组件中也需要使用 watch 监测变化 $route 对象
created() {
this.initData();
},
watch: {
//监听相同路由下参数变化的时候,从而实现异步刷新
'$route'(to,from){
this.initData();
},
},
参考来源于:
更多推荐
已为社区贡献12条内容
所有评论(0)