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 ...
随机推荐
- supervisor安装与配置实践版
应用场景 系统:centos7 需求:监控一个swooleWebSocket.php文件,程序使用的是8080端口,挂了自动被supervisor拉起来 一.首先要安装supervisor软件 yum ...
- Django使用DjangoUeditor教程
文章目录 1.将下在DjangoUeditor解压2.将解压的文件夹复制到项目的根目录中,这里使用的是虚拟环境3.进入到DjangoUedior3-master文件下,执行离线安装命令 python ...
- pytorch中的view函数和max函数
一.view函数 代码: a=torch.randn(,,,) b = a.view(,-) print(b.size()) 输出: torch.Size([, ]) 解释: 其中参数-1表示剩下的值 ...
- inventor安装未完成,某些产品无法安装的解决方法
inventor提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装inventor失败提示inventor安装未完成,某些产品无法安装,也有时候想重新安装inv ...
- VMware虚拟机里安装CentOS 6.3图文教程
著名服务器版本 CentOS 6.3 已经发布 http://www.centoscn.com/CentosSoft/iso/2013/0720/370.html CentOS 6.3 网易镜像下载: ...
- 从零开始实现基于微信JS-SDK的录音与语音评价功能
最近接受了一个新的需求,希望制作一个基于微信的英语语音评价页面.即点击录音按钮,用户录音说出预设的英文,根据用户的发音给出对应的评价.以下是简单的Demo:  机械语言:直接使用二进制与计算机沟通,直接操作硬件,执行效率高,开发效率低. 汇编语言:用简单的英文代替二进制,直接操作硬件,执行效率较机械语言低,开 ...
- IBM Developer:Java 9 新特性概述
Author: 成富 Date: Dec 28, 2017 Category: IBM-Developer (20) Tags: Java (27) 原文地址:https://www.ibm.com/ ...
- Gnu pgp加密解密
在生成密钥的时候,无法生成足够多的随机数,提示“ Not enough random bytes available. Please do some other work to givethe OS ...
- GeoMesa-单机搭建
系统安装 CentOS部署 新建虚拟电脑 类型:Linux 版本:Red Hat(64-bit) 创建虚拟硬盘 [x] 动态分配(磁盘占用较小) [ ] 固定大小(使用起来较快) 安装设置(设置roo ...