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中的View-Model使用介绍
Aug 11 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 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
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
JQuery实现自定义对话框的代码
2008/06/15 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
使用Python神器对付12306变态验证码
2016/01/05 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
Servlet的生命周期
2013/08/25 面试题
我爱我的祖国演讲稿
2014/05/04 职场文书
绿色小区申报材料
2014/08/22 职场文书
红色旅游心得体会
2014/09/03 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
上学路上观后感
2015/06/16 职场文书