解决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 相关文章推荐
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
JS如何监听div的resize事件详解
Dec 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网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
Python中的多重装饰器
2015/04/11 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
python 写一个文件分发小程序
2020/12/05 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
python绘制高斯曲线
2021/02/19 Python
工程招投标邀请书
2014/01/26 职场文书
小学校园活动策划
2014/01/30 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
贷款担保申请书
2014/05/20 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
党小组评议意见
2015/06/02 职场文书
家长会感言
2015/08/01 职场文书
python非标准时间的转换
2021/07/25 Python