vue_相同组件,不同url跳转不重新渲染的解决方法
最近写的这个项目,有很多下拉菜单,每个菜单会有相应的两种类型。现在产品的需求是,跳转到不同的类型 需要页面重新渲染数据
那么问题来了。
我试了好几种方法,用watch监听路由去判断,但是发现输在input里面的值是不会被替换掉的
所以想到了用key 去如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。
因为工作性质,不能贴代码
所以
<router-view v-if="isRouterActive" :key="key"></router-view>
data(){
return isRouterActive:true,
key:''
}
watch:{
'$route'(to,from){
this.isRouterActive = false;
this.key = Math.random()*1000;
this.$nextTick(()=>(this.isRouterActive = true))
}
}
vue_相同组件,不同url跳转不重新渲染的解决方法的更多相关文章
- WebView加载URL跳转到系统浏览器的解决方法
1.问题 webview加载url跳转到系统浏览器,用户体验非常的差 2.解决方法 重写WebViewClient的shouldOverrideUrlLoading(WebView view, Str ...
- jquery.ajax的url中传递中文乱码问题的解决方法
jquery.ajax的url中传递中文乱码问题的解决方法 JQuery JQuery默认的contentType:application/x-www-form-urlencoded 这才是JQu ...
- chrome浏览器打开网页,总是跳转到2345主页的解决方法 2345.com 绑架主页
昨晚装了一个wifi共享精灵,原本以为这下好了,全宿舍都可以上网了,但是,确实噩梦的开始啊. 遇到问题:不小心在安装wifi共享精灵的时候,点到了设置2345.com为主页,后来,每次使用chrome ...
- windows 2003添加删除windows组件中无iis应用程序服务器项的解决方法
解决方法如下: 1.开始 -- 运行,输入 c:\Windows\inf\sysoc.inf,会打开这个文件;在sysoc.inf中找到"[Components]"这一段,并继续找 ...
- iOS url带中文下载时 报错解决方法
问题描述:下载文件时, 请求带中文的URL的资源时,比如:http://s237.sznews.com/pic/2010/11/23/e4fa5794926548ac953a8a525a23b6f2/ ...
- C# JS URL 中文传参出现乱码的解决方法
在传参是先编码在传输,接受时先编码,在接收. string mm=Server.URLEncode(你); Response.Redirect(index.aspx?mm=+mm); 然后在接收页解码 ...
- DTCMS,手机网站访问跳转到DTCMS官网解决方法
mobile\js\base.js main\js\common.js 去掉location.href = 'http://m.dtcms.net'; 也可以设定手机访问跳转到指定域名
- 父组件中vuex方法更新state,子组件不能及时更新并渲染的解决方法
场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...
- url中向后台传递中文乱码解决方法
方法一: 1.jsp中代码 var userNo = $('#prisoner_id').val(); userNo = encodeURI(userNo); allPrisone ...
随机推荐
- pycharm打印出的汉字显示乱码
pycharm未配置时,默认配置为: 打印汉字时显示乱码 简单设置即可 这下以后就没有问题了.
- nmon监控指标
一.NMON中的各项参数指标: SYS_SUMM:显示当前服务器的总体性能情况 Total System I/OStatistics: Avg tps during an interval:显示采集间 ...
- 58)PHP,后台登录步骤示意图
注意上面的action提交位置: 并且注意下面的两个东西:
- 吴裕雄--天生自然python学习笔记:python文档操作插入图片
向 Word 文件中插入图片 向 Word 文件插入图片的语法为: 例如,在 cl ip graph.docx 文件的第 4 段插入 ce ll.jpg 图片,井将图片文件保存于 Word 文件内: ...
- 基于Python的Flask基础知识
Flask简介 Flask 是一个使用 Python 编写的轻量级 Web 应用程序框架.Armin Ronacher带领一个名为Pocco的国际Python爱好者团队开发了Flask. 下面我们简单 ...
- “大屏,您好!” SONIQ声光揭新品“U•F•O”神秘面纱
作为全球第一批做互联网智能电视的传媒企业,SONIQ声光于4月22日在中国大饭店举行了盛大的新品发布会.其中的重头戏就是当天发布会上作为先锋部队入驻中国电视市场的"UFO".笔者作 ...
- Qt QString与int的转换
QString转int QString a=" ; int b; b=a.toInt(); int 转 QString ; QString b; b=QString::number(a)
- HttpClient GET和POST请求
package com.rogue.hclient; import java.io.BufferedReader; import java.io.IOException; import java.io ...
- 使用Spring AOP 实现日志管理(简单教程)
有时候,我们在做项目时会遇到这样的需求: 给XXX.java中的所有方法加上指定格式的日志输出. 针对这种指定类.或者指定方法进行共性操作的功能,我们完全可以使用Spring AOP来实现. 本文使用 ...
- 安装 Kali Linux 2018.1 及之后的事
本文为原创文章,转载请标明出处 目录 制作U盘启动盘 安装 Kali Linux 之后的事 更新源 配置 Zsh 配置 Vim 修改 Firefox 语言为中文 安装 Gnome 扩展 美化 安装 G ...