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 ...
随机推荐
- JVM相关面试题
1.JVM 基本机构 1.1 类加载子系统负责从文件系统或者网络中加载Class信息,加载的类信息存放于一块称为方法区的内存空间.除了类的信息外,方法区中可能还会存放运行时常量池信息,包括字符串字面量 ...
- 感觉自己out了
看了公司混乱而落后的框架,想自己开发一个. 无意中到开源网站看到,开源的控件已经非常多了,基本上说应有尽有. 感叹这个知识大爆炸的年代. 自己现在是坐在井底的蛤蟆?
- Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
解决办法: 两个方案:1.注册处理函数时,用如下方式,明确声明为不是被动的window.addEventListener('touchmove', func, { passive: false }) ...
- C++语言堆栈的详细讲解
本文主要向大家介绍了C++语言堆栈的详细讲解,通过具体的内容向大家展示,希望对大家学习C++语言有所帮助. 一.预备知识—程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区 ...
- 常用的mysql操作
总结一下常用的mysql操作,避免下次遇到类似情况重复地去百度. 方法不是唯一的,但记录一种可行的方法就可以了. 遇到新的问题再继续补充. 1.增加一个列 ALTER TABLE 表名 ADD COL ...
- perf4j+logback配置 非spring 可使用注解
最近项目打算使用perf4j进行性能监控,由于项目没有使用spring,而又不想对代码入侵过高,打算使用注解的方式进行接入.perf4j采用AspectJ库实现AOP. 具体接入方法如下: logba ...
- JVM 的内存布局
这是jdk7以后的版本 1. Heap(堆区) Heap OOM 障最主要的发源地, 它存储着几乎所有的实例对象, 堆由垃圾收集器自动回收, 堆区由各子线程共享使用.通常情况下 它占用的空间是所有内存 ...
- http 3种web会话管理方式
http是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的.当然它知道是哪个客户端地址发过来的,但是对于我们的应用来说,我们是靠用户来管理,而不是靠客户端. ...
- row_number over( partition by xx)
在原始表中 新加一个临时列 去重, 排序 比多次join性能提高很多 http://www.mysqltutorial.org/mysql-window-functions/mysql-row_num ...
- Torque:轻应用背后的大蓄势 微软语音技术厚积薄发
Torque,为中国用户而来 此前,"微软车库"公开发布了一系列小而美的产品,它们全部由具有"极客创新"精神的微软员工在工作之外的时间构思和开发.Torque就 ...