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

那么问题来了。

我试了好几种方法,用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. pycharm打印出的汉字显示乱码

    pycharm未配置时,默认配置为: 打印汉字时显示乱码 简单设置即可 这下以后就没有问题了.

  2. nmon监控指标

    一.NMON中的各项参数指标: SYS_SUMM:显示当前服务器的总体性能情况 Total System I/OStatistics: Avg tps during an interval:显示采集间 ...

  3. 58)PHP,后台登录步骤示意图

    注意上面的action提交位置: 并且注意下面的两个东西:

  4. 吴裕雄--天生自然python学习笔记:python文档操作插入图片

    向 Word 文件中插入图片 向 Word 文件插入图片的语法为: 例如,在 cl ip graph.docx 文件的第 4 段插入 ce ll.jpg 图片,井将图片文件保存于 Word 文件内: ...

  5. 基于Python的Flask基础知识

    Flask简介 Flask 是一个使用 Python 编写的轻量级 Web 应用程序框架.Armin Ronacher带领一个名为Pocco的国际Python爱好者团队开发了Flask. 下面我们简单 ...

  6. “大屏,您好!” SONIQ声光揭新品“U•F•O”神秘面纱

    作为全球第一批做互联网智能电视的传媒企业,SONIQ声光于4月22日在中国大饭店举行了盛大的新品发布会.其中的重头戏就是当天发布会上作为先锋部队入驻中国电视市场的"UFO".笔者作 ...

  7. Qt QString与int的转换

    QString转int QString a=" ; int b; b=a.toInt();   int 转 QString ; QString b; b=QString::number(a)

  8. HttpClient GET和POST请求

    package com.rogue.hclient; import java.io.BufferedReader; import java.io.IOException; import java.io ...

  9. 使用Spring AOP 实现日志管理(简单教程)

    有时候,我们在做项目时会遇到这样的需求: 给XXX.java中的所有方法加上指定格式的日志输出. 针对这种指定类.或者指定方法进行共性操作的功能,我们完全可以使用Spring AOP来实现. 本文使用 ...

  10. 安装 Kali Linux 2018.1 及之后的事

    本文为原创文章,转载请标明出处 目录 制作U盘启动盘 安装 Kali Linux 之后的事 更新源 配置 Zsh 配置 Vim 修改 Firefox 语言为中文 安装 Gnome 扩展 美化 安装 G ...