解决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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
jquery tools系列 expose 学习
Sep 06 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
vuex 的简单使用
Mar 22 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 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中strtotime函数使用方法详解
2011/11/27 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
Python中给List添加元素的4种方法分享
2014/11/28 Python
Python去除列表中重复元素的方法
2015/03/20 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
简单了解Django ContentType内置组件
2019/07/23 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
简历中的自我评价怎么写
2014/01/29 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
服务标语口号
2014/07/01 职场文书
2014年部门工作总结
2014/11/12 职场文书
中学生学习保证书
2015/02/26 职场文书
感恩教育主题班会
2015/08/12 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL
Python编写冷笑话生成器
2022/04/20 Python
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python