vue比较模板来跟新数据
一,使用场景:
点击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比较模板来跟新数据的更多相关文章
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
- vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容
vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...
- 中小研发团队架构实践之生产环境诊断工具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如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- 【Amaple教程】3. 模板指令与状态数据(state)
一个模块的template模板.JavaScript和css之间的关系其实可以如下图表示: 如果你了解Angular.Vue动态模板,那你将会对Amaple的模板感到很熟悉,在Amaple中,temp ...
- 使用VUE+SpringBoot+EasyExcel 整合导入导出数据
使用VUE+SpringBoot+EasyExcel 整合导入导出数据 创建一个普通的maven项目即可 项目目录结构 1 前端 存放在resources/static 下 index.html &l ...
- Vue源码学习(一)———数据双向绑定 Observer
从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model=" ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- 前端框架之Vue(2)-模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- vue 数据绑定 绑定属性 循环渲染数据
<template> <!-- vue的模板里面 所有的内容要被一个根节点包含起来 --> <div id="app"> <h2>{ ...
随机推荐
- MarkDown 使用说明示例
一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 一级标题 这是 H2 这是 H3 一级和二级标题还有一种写法 就是下面加横杆,同时 超过2个的 = 和 - 都可以有效果. Thi ...
- windows使用技巧和工具(后面可能更新linux)
*:希望广大网友有什么建议或者好的用法工具.也能够在以下评论. 希望这是一个能够让我们更好工作起来的帖子. 工作也能舒适和开心呢. 想着好久没写过博客了吧.今天就写一篇关于windows的使用的吧.我 ...
- [转]linux下lame的使用
找到這篇好文章,不得不说開源的Lame功能很強大 linux下lame的使用 % lame [参数] <输入文件名> [<输出文件名>] 如需查询更多参数,可输入下列命令: % ...
- 使用 SharpSvn 执行 svn 操作的Demo
1. SharpSvn简介 SharpSvn.dll 是为.Net 2.0-4.0+ 应用提供的 Subversion Client API,更多详细介绍请见 https://sharpsvn.ope ...
- 主调度器schedule
中断处理完毕后,系统有三种执行流向: 1)直 ...
- Loadrunner对https协议(单双向SSL)的web端性能测试
1.项目背景 1.1 单双向SSL的含义及部署 单向SSL即我们说到的https协议. 特点是,浏览器需要请求验证服务器证书: 基本含义是:一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务 ...
- [转] Linux常用命令大全(非常全!!!)
出处:https://www.cnblogs.com/yjd_hycf_space/p/7730690.html Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得 ...
- Apache+php5
.下载回来的是解压文件,解压好放到要安装的位置.(我这里以D:\Acpache24为例) .打开Apache24\conf下httpd.conf 文件,用记事本打开即可. ()第37行ServerRo ...
- Windows 下 Chrome 快捷键大全
Windows 下 Chrome 快捷键大全,即 Google 浏览器的快捷键. 1 Ctrl+N 打开新窗口. 2 Ctrl+T 打开新标签页. 3 Ctrl+Shift+N 在隐身模式下打开新窗口 ...
- flume使用之exec source收集各端数据汇总到另外一台服务器
转载:http://blog.csdn.net/liuxiao723846/article/details/78133375 一.场景一描述: 线上api接口服务通过log4j往本地磁盘上打印日志,在 ...