vue相同路由跳转强制刷新该路由组件操作


Posted in Javascript onAugust 05, 2020

想必大家在平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建)。而vue自身如果路由不变的情况下是不会这样做的,那么只能使用一些骚操作了。

1.在菜单的路由跳转上绑定一个随机query参数,例如时间戳或者随机数:

this.$router.push({
  path:"/xxx",
  query:{
    t:Date.now(),
  },
});

该操作会触发路由改变,但是组件内的状态没有初始化,因为组件没有被重建。

2.在路由容器上绑定key值:

<router-view :key="$route.path + $route.query.t"></router-view>

大功告成,通过key值的变化去强制刷新该组件。

补充知识:[vue-router] Duplicate named routes definition

浏览器告警信息

[vue-router] Duplicate named routes definition: { name: “index”, path: “/index” }

说明路由命名的name属性重复

举 例:

{ path: ‘', name: ‘index', redirect: ‘/fiibox/personHome' },

改正:

{ path: ‘', name: ‘', redirect: ‘/fiibox/personHome' },

以上这篇vue相同路由跳转强制刷新该路由组件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
在JavaScript中使用timer示例
May 08 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
vue实现循环滚动列表
Jun 30 Javascript
Vue实现购物车基本功能
Nov 08 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 #Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 #Javascript
Vue 同步异步存值取值实现案例
Aug 05 #Javascript
详解vue路由
Aug 05 #Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 #Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 #Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 #Javascript
You might like
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
Tensorflow 实现释放内存
2020/02/03 Python
django的autoreload机制实现
2020/06/03 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
CSS3 实现的加载动画
2020/12/07 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
房屋委托书范本
2014/04/04 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
单位考核聘任报告
2015/03/02 职场文书
教师个人自我评价
2015/03/04 职场文书
捐款通知怎么写
2015/04/24 职场文书
地道战观后感2000字
2015/06/04 职场文书
教师理论学习心得体会
2016/01/21 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书