一,使用场景:

点击menu通过路由,跳转当前列表,第二次点击menu,希望可以刷新列表;

二,解决思路:

给路由添加时间戳;

三,参考观点:

用 :key管理可复用的元素

模板相同,会造成一种“复用”的感觉(v-if和v-else的模板是一样一样的),也就是说,数据更新之前,会先比较模板先后的异同,再决定是否跟新数据,并不是先更新数据,再刷新模板

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

四,解决方案:

side_nav.vue

<el-menu-item @click.native="clickLink('/product_list')" index="/product_list">商品列表</el-menu-item>
            clickLink(path) {
this.$router.push({
path,
query: {
t: +new Date() //保证每次点击路由的query项都是不一样的,确保会重新刷新view
}
})
},

main.vue

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

参考:

https://www.cnblogs.com/first-time/p/7067674.html

vue比较模板来跟新数据的更多相关文章

  1. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  2. vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容

    vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...

  3. 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问

    中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

  4. 【Amaple教程】3. 模板指令与状态数据(state)

    一个模块的template模板.JavaScript和css之间的关系其实可以如下图表示: 如果你了解Angular.Vue动态模板,那你将会对Amaple的模板感到很熟悉,在Amaple中,temp ...

  5. 使用VUE+SpringBoot+EasyExcel 整合导入导出数据

    使用VUE+SpringBoot+EasyExcel 整合导入导出数据 创建一个普通的maven项目即可 项目目录结构 1 前端 存放在resources/static 下 index.html &l ...

  6. Vue源码学习(一)———数据双向绑定 Observer

    从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model=" ...

  7. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  8. 前端框架之Vue(2)-模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  9. vue 数据绑定 绑定属性 循环渲染数据

    <template> <!-- vue的模板里面 所有的内容要被一个根节点包含起来 --> <div id="app"> <h2>{ ...

随机推荐

  1. winform利用itextsharp.dll实现图片文件转换PDF格式文件

    1.利用itextsharp.dll实现单个图片文件转换为PDF格式文件, 可以使用以下类: void ConvertJPG2PDF(string jpgfile, string pdf) { var ...

  2. glibc中fork系统调用传参

    因为想跟踪下在新建进程时,如何处理新建进程的vruntime,所以跟踪了下fork. 以glic-2.17中ARM为例(unicore架构的没找到),实际上通过寄存器向系统调用传递的参数为: r7: ...

  3. [转]oracle awr报告生成和分析

    转自:http://blog.csdn.net/cuker919/article/details/8767328 最近由于数据库cpu占用非常高,导致VCS常常自动切换,引起很多问题. 最近学习一下数 ...

  4. redis的有序集合ZSET(stored set)

    相关命令 1.ZADD ZADD key-name score member [score member……] 将带有给定分值的成员添加到有序集合里 2.ZREM ZREM  key-name mem ...

  5. scanf_s,scanf安全版本

    %s,%c必须加sizeof(it)

  6. C#爬网页时“远程服务器返回错误: (403) 已禁止”解决方法

    HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create(uri); //这个一定要加上,在某些网站没有会发生"远程服务器返回错误: ...

  7. linux环境中,如何使用tar来创建压缩包?解压缩?

    需求说明: 今天需要将一个tomcat目录打成压缩包,使用zip感觉有点慢,所以就想用tar来试试,之前一直使用tar的解压缩命令, 今天试试tar的压缩命令 操作过程: 1.通过tar的zcf选项进 ...

  8. spring boot工程打成JAR包到服务器上运行

    只需在项目的pom.xml中加入下面插件 <build> <plugins> <plugin> <groupId>org.springframework ...

  9. Explore Basic Behavior of the TurtleBot ---3

    原创博文:转载请标明出处(周学伟):http://www.cnblogs.com/zxouxuewei/tag/ Introduction 此示例帮助您使用turtlebot的自主性. 驱动机器人向前 ...

  10. GoogLeNet解读

    转载:http://blog.csdn.net/shuzfan/article/details/50738394 GoogLeNet主要贡献提出了Inception结构: Architectural ...