解决vue更新路由router-view复用组件内容不刷新的问题


Posted in Javascript onNovember 04, 2019

本文知识点比较简单,主要面向vue新人解惑,vue前辈请忽略。

实现功能:

解决vue更新路由router-view复用组件内容不刷新的问题

见上图,这是一个产品列表,当进入不同列表时应该更新内容。

代码如下:

//router配置

{
  path: "/products/:category",
  name: "Products",
  components: {
  ...
  }
 }

//组件js配置

mounted() {
  this.getData(this.$route.params.category);
 },
 methods: {
  getData: function(category){
   this.axios.get("/products/" + category).then(res => {
 
    const data = res.data.data;
    this.pros = data.pro;
   }).catch(error => {
    console.log("error init." + error);
   });
  }
 }

目前症状:

1、点击不同类别,url有变化已正确指向不同的路由,但是内容没有更新

2、由当前类别进入其他类别路由后刷新页面,可正确获取数据

知识点

在使用Vue-router做项目时,会遇到如/serviceId/:id这样只改变id号的场景。由于router-view是复用的,单纯的改变id号并不会刷新router-view

watch 除了可以监听数据的变化,路由的变化也能被其监听到

:key vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可

针对以上,经过本人项目实践以及网友贡献,有三种方法可解决:

方法一:通过 watch 监听路由(亲测可行)

mounted() {
 this.getData(this.$route.params.category);
},
methods: {
 getData: function(category){
 ...
 }
},
watch: { //通过watch来监听路由变化
 "$route": function(){
 this.getData(this.$route.params.category);
 }
}

方法二:用 :key 来阻止“复用”

具体使用方法:

<router-view :key="key"></router-view>
 
computed: {
 key() {
 return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
 }
}

tips:使用computed属性和Date()可以保证每一次的key都是不同的,这样就可以如愿刷新数据了

方法三:通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

computed:mapGetters([
 ...
]),
beforeRouteEnter (to, from, next) {
 // 在渲染该组件的对应路由被 confirm 前调用
 // 不!能!获取组件实例 `this`
 // 因为当钩子执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
 // 在当前路由改变,但是该组件被复用时调用
 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
 // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
 // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
 // 导航离开该组件的对应路由时调用
 // 可以访问组件实例 `this`
}

本人尝试使用"beforeRouteUpdate",但位得到解决,其他方法没有尝试。

以上内容如果有错误,请各位朋友指出,谢谢。

这篇解决vue更新路由router-view复用组件内容不刷新的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记(十五)
Jan 28 Javascript
js的一些常用方法小结
Jun 29 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
Bootstrap插件全集
Jul 18 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 #Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 #Javascript
element-ui table组件如何使用render属性的实现
Nov 04 #Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 #Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 #Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 #Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 #Javascript
You might like
php 缓存函数代码
2008/08/27 PHP
PHP 危险函数解释 分析
2009/04/22 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
javascript Excel操作知识点
2009/04/24 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python实现汇率转换操作
2020/05/03 Python
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
《识字五》教学反思
2014/03/01 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
python全面解析接口返回数据
2022/02/12 Python