一,使用场景:

点击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. MarkDown 使用说明示例

    一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 一级标题 这是 H2 这是 H3 一级和二级标题还有一种写法 就是下面加横杆,同时 超过2个的 = 和 - 都可以有效果. Thi ...

  2. windows使用技巧和工具(后面可能更新linux)

    *:希望广大网友有什么建议或者好的用法工具.也能够在以下评论. 希望这是一个能够让我们更好工作起来的帖子. 工作也能舒适和开心呢. 想着好久没写过博客了吧.今天就写一篇关于windows的使用的吧.我 ...

  3. [转]linux下lame的使用

    找到這篇好文章,不得不说開源的Lame功能很強大 linux下lame的使用 % lame [参数] <输入文件名> [<输出文件名>] 如需查询更多参数,可输入下列命令: % ...

  4. 使用 SharpSvn 执行 svn 操作的Demo

    1. SharpSvn简介 SharpSvn.dll 是为.Net 2.0-4.0+ 应用提供的 Subversion Client API,更多详细介绍请见 https://sharpsvn.ope ...

  5. 主调度器schedule

    中断处理完毕后,系统有三种执行流向:                                                                               1)直 ...

  6. Loadrunner对https协议(单双向SSL)的web端性能测试

    1.项目背景 1.1 单双向SSL的含义及部署 单向SSL即我们说到的https协议. 特点是,浏览器需要请求验证服务器证书: 基本含义是:一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务 ...

  7. [转] Linux常用命令大全(非常全!!!)

    出处:https://www.cnblogs.com/yjd_hycf_space/p/7730690.html Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得 ...

  8. Apache+php5

    .下载回来的是解压文件,解压好放到要安装的位置.(我这里以D:\Acpache24为例) .打开Apache24\conf下httpd.conf 文件,用记事本打开即可. ()第37行ServerRo ...

  9. Windows 下 Chrome 快捷键大全

    Windows 下 Chrome 快捷键大全,即 Google 浏览器的快捷键. 1 Ctrl+N 打开新窗口. 2 Ctrl+T 打开新标签页. 3 Ctrl+Shift+N 在隐身模式下打开新窗口 ...

  10. flume使用之exec source收集各端数据汇总到另外一台服务器

    转载:http://blog.csdn.net/liuxiao723846/article/details/78133375 一.场景一描述: 线上api接口服务通过log4j往本地磁盘上打印日志,在 ...