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 写类方式之九
Jul 05 Javascript
JS 控制非法字符的输入代码
Dec 04 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
Express结合Webpack的全栈自动刷新
May 23 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
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
php开启openssl的方法
2014/05/15 PHP
php网页病毒清除类
2014/12/08 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
打包发布Python模块的方法详解
2016/09/18 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
函数指针的定义是什么
2016/08/14 面试题
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
医学生职业规划范文
2014/01/05 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
休假证明书
2015/06/24 职场文书
Python开发五子棋小游戏
2022/05/02 Python
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript