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

那么问题来了。

我试了好几种方法,用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. Reveal详细安装教程

    Reveal的详细安装使用 标签: Reveal 工具 调试 iOS 一.终端的操作 首先最重要的一点,要先把Reveal软件放到Application中,否则路径是错的,后面的设置也就没有作用了 打 ...

  2. WAIC | 奇点云携「酷炫AI应用」亮相2019世界人工智能大会

    你是否还在疑惑“人工智能可否改变世界?” 那么,你该有一些危机感了. 机器视觉.自然语言处理.智能语音.机器人问诊.智慧驾驶……这些AI技术及应用早已渗入了我们日常生活的点滴. 29日,以「智联世界, ...

  3. 复习break、continue、while、do-while的运用

    一.复习: 循环.反复执行某段语句一种语法形式. 1.基本语法: for( 初始条件 ; 循环条件 ; 状态的改变 ) { 循环体 } 循环的四要素. 循环的执行过程.初始条件--循环条件--循环体- ...

  4. 类加载器ClassLoader的理解

    最近在做一个热加载Class的小组件,这个组件需要对类加载器ClassLoader有所了解,我就顺便借这个机会把学到的一点皮毛与大家分享一下. 从Class文件开始 ClassLoader,顾名思义就 ...

  5. cs231n spring 2017 lecture13 Generative Models

    1. 非监督学习 监督学习有数据有标签,目的是学习数据和标签之间的映射关系.而无监督学习只有数据,没有标签,目的是学习数据额隐藏结构. 2. 生成模型(Generative Models) 已知训练数 ...

  6. 如果你有一个域名,你也可以免费有一个diy@yourdomain.com的企业邮局

    如果你有一个域名,例如:www.bengou.net那么你可以拥有一个免费邮箱:lajiyoujian@bengou.net.那么什么是企业邮局呢?有啥优点 企业邮局是指以您的域名作为后缀的电子邮件地 ...

  7. [LC] 256. Paint House

    There are a row of n houses, each house can be painted with one of the three colors: red, blue or gr ...

  8. 使用jxl操作之一: 实现对Excel简单读写操作

    项目目录树 对象类UserObject UserObject.java package com.dlab.jxl; public class UserObject { private String u ...

  9. Android的HttpClient调用,冲突的解决办法

    只适用部分情况 题外话 攻关百度自动发贴作推广失败,但登录已拿下.全扔有点浪费. 在登录的基础上写了个百度的自动签到系统,功能已实现([java,android,nodejs,.net]+nodejs ...

  10. 前端js代码以备不时之需

    //获取id元素信息let getId = (args) => { return document.getElementById(args);} //获取类名元素let getClassName ...