最近写的这个项目,有很多下拉菜单,每个菜单会有相应的两种类型。现在产品的需求是,跳转到不同的类型 需要页面重新渲染数据

那么问题来了。

我试了好几种方法,用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跳转不重新渲染的解决方法的更多相关文章

  1. WebView加载URL跳转到系统浏览器的解决方法

    1.问题 webview加载url跳转到系统浏览器,用户体验非常的差 2.解决方法 重写WebViewClient的shouldOverrideUrlLoading(WebView view, Str ...

  2. jquery.ajax的url中传递中文乱码问题的解决方法

    jquery.ajax的url中传递中文乱码问题的解决方法   JQuery JQuery默认的contentType:application/x-www-form-urlencoded 这才是JQu ...

  3. chrome浏览器打开网页,总是跳转到2345主页的解决方法 2345.com 绑架主页

    昨晚装了一个wifi共享精灵,原本以为这下好了,全宿舍都可以上网了,但是,确实噩梦的开始啊. 遇到问题:不小心在安装wifi共享精灵的时候,点到了设置2345.com为主页,后来,每次使用chrome ...

  4. windows 2003添加删除windows组件中无iis应用程序服务器项的解决方法

    解决方法如下: 1.开始 -- 运行,输入 c:\Windows\inf\sysoc.inf,会打开这个文件;在sysoc.inf中找到"[Components]"这一段,并继续找 ...

  5. iOS url带中文下载时 报错解决方法

    问题描述:下载文件时, 请求带中文的URL的资源时,比如:http://s237.sznews.com/pic/2010/11/23/e4fa5794926548ac953a8a525a23b6f2/ ...

  6. C# JS URL 中文传参出现乱码的解决方法

    在传参是先编码在传输,接受时先编码,在接收. string mm=Server.URLEncode(你); Response.Redirect(index.aspx?mm=+mm); 然后在接收页解码 ...

  7. DTCMS,手机网站访问跳转到DTCMS官网解决方法

    mobile\js\base.js main\js\common.js 去掉location.href = 'http://m.dtcms.net'; 也可以设定手机访问跳转到指定域名

  8. 父组件中vuex方法更新state,子组件不能及时更新并渲染的解决方法

    场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...

  9. url中向后台传递中文乱码解决方法

    方法一: 1.jsp中代码 var userNo = $('#prisoner_id').val();      userNo = encodeURI(userNo);      allPrisone ...

随机推荐

  1. supervisor安装与配置实践版

    应用场景 系统:centos7 需求:监控一个swooleWebSocket.php文件,程序使用的是8080端口,挂了自动被supervisor拉起来 一.首先要安装supervisor软件 yum ...

  2. Django使用DjangoUeditor教程

    文章目录 1.将下在DjangoUeditor解压2.将解压的文件夹复制到项目的根目录中,这里使用的是虚拟环境3.进入到DjangoUedior3-master文件下,执行离线安装命令 python ...

  3. pytorch中的view函数和max函数

    一.view函数 代码: a=torch.randn(,,,) b = a.view(,-) print(b.size()) 输出: torch.Size([, ]) 解释: 其中参数-1表示剩下的值 ...

  4. inventor安装未完成,某些产品无法安装的解决方法

    inventor提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装inventor失败提示inventor安装未完成,某些产品无法安装,也有时候想重新安装inv ...

  5. VMware虚拟机里安装CentOS 6.3图文教程

    著名服务器版本 CentOS 6.3 已经发布 http://www.centoscn.com/CentosSoft/iso/2013/0720/370.html CentOS 6.3 网易镜像下载: ...

  6. 从零开始实现基于微信JS-SDK的录音与语音评价功能

    最近接受了一个新的需求,希望制作一个基于微信的英语语音评价页面.即点击录音按钮,用户录音说出预设的英文,根据用户的发音给出对应的评价.以下是简单的Demo: ![](reecode/qrcode.pn ...

  7. 语言发展与python

    编程语言的发展史(机械语言.汇编语言.高级语言) 机械语言:直接使用二进制与计算机沟通,直接操作硬件,执行效率高,开发效率低. 汇编语言:用简单的英文代替二进制,直接操作硬件,执行效率较机械语言低,开 ...

  8. IBM Developer:Java 9 新特性概述

    Author: 成富 Date: Dec 28, 2017 Category: IBM-Developer (20) Tags: Java (27) 原文地址:https://www.ibm.com/ ...

  9. Gnu pgp加密解密

    在生成密钥的时候,无法生成足够多的随机数,提示“ Not enough random bytes available. Please do some other work to givethe OS ...

  10. GeoMesa-单机搭建

    系统安装 CentOS部署 新建虚拟电脑 类型:Linux 版本:Red Hat(64-bit) 创建虚拟硬盘 [x] 动态分配(磁盘占用较小) [ ] 固定大小(使用起来较快) 安装设置(设置roo ...