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 相关文章推荐
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
Javascript中的async awai的用法
May 17 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
如何选购合适的收音机
2021/03/01 无线电
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
layui复选框限制选择个数的方法
2019/09/18 Javascript
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
python下载图片实现方法(超简单)
2017/07/21 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
pandas中去除指定字符的实例
2018/05/18 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
浅析python连接数据库的重要事项
2021/02/22 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
秋季运动会稿件
2014/01/30 职场文书
小学生环保倡议书
2014/05/15 职场文书
道路施工安全责任书
2014/07/24 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
光荣之路观后感
2015/06/12 职场文书