vue_相同组件,不同url跳转不重新渲染的解决方法
2024-09-05 00:10:59
最近写的这个项目,有很多下拉菜单,每个菜单会有相应的两种类型。现在产品的需求是,跳转到不同的类型 需要页面重新渲染数据
那么问题来了。
我试了好几种方法,用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))
}
}
最新文章
- RemoteIE 开发者可跨平台使用IE测试网页
- Python中format的用法
- Hibernate映射之OneToOne(第二篇)
- IIS用户权限备忘
- python 生成二维码
- QQ互联OAuth2.0 .NET SDK 发布以及网站QQ登陆示例代码(转)
- C语言学习笔记(一):数组传递时退化为指针
- 2016 C++及系统软件技术大会亮点
- Angular - - angular.identity和angular.noop
- python3 annotations
- spider 爬虫文件基本参数(3)
- Mysql分表:Merge
- SELinux app权限配置
- Python_shelve模块
- hive执行报错:Both left and right aliases encountered in JOIN &#39;s1&#39;
- 第17章 EXTI—外部中断/事件控制器
- Selenium和TestNG
- Office办公 如何给WPS 的文字添加黑框
- SWIFT Optional Value
- 【CSAPP笔记】8. 汇编语言——数据存储
热门文章
- Helvetic Coding Contest 2019 差A3 C3 D2 X1 X2
- LIS 问题
- 一、安装Docker CE
- VB6实现Excel多工作簿数据合并
- dbSNP|n SwissVar|n CanProVar|CHPP|mutation assessor|
- POJ3264 Balanced Lineup [RMQ模板]
- 3dmax2012卸载/安装失败/如何彻底卸载清除干净3dmax2012注册表和文件的方法
- 二、RabbitMQ简介及AMQP协议
- awk使用和详解
- fiddler问题汇总