Vue 刷新当前路由的实现代码


Posted in Javascript onSeptember 26, 2019

前言

开发项目的时候突然接到了这个需求,实验过后,解决方法也蛮多种,下面就讲下常规的几种方案

1.改变router-view中的key值

通过改变 router-view 中的 key 值,来达到刷新组件的目的

<router-view :key="activeDate"></router-view>

this.activeDate = new Date()

2.给 router-view 标签添加 v-if

通过 $nextTick() ,协助实现。先把 <router-view /> 移除,移除后再重新添加,达到刷新当前页面的功能。

<router-link :to="url" @click.native="refresh">页面1</router-link>
<router-view v-if="flag"/>

<script>
export default {
  data () {
    return {
      flag: true 
    }
  },
  methods: {
   refresh() {
     this.flag= false // 通过v-if移除router-view节点
     this.$nextTick(() => {
       this.flag= true // DOM更新后再通过v-if添加router-view节点
     })
    }
  }
}
</script>

3.新建空白页,也是种不错的方案

refresh.vue //新建页面
<script>
  export default {
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.$router.replace(from.path)
      })
    }
  }
</script>

demo.vue //然后在需要的页面调用
this.$router.replace({
   path: '/refresh',
   query: {
     t: Date.now()
    }
})

4.query传值 watch监听页面$route变化然后更新

5.provide / inject 组合

6.取巧的办法 <router-view ref="chartView"></router-view>

定义ref,然后调用相对应的方法,最好给每个页面都提供相同的方法

this.$refs.chartView.refresh()

就解决了点击当前路由没有刷新的问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 #Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 #Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 #Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 #Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 #Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 #Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 #Javascript
You might like
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
php Ajax乱码
2008/04/09 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python画图常规设置方式
2020/03/05 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
业务经理的岗位职责
2013/11/16 职场文书
研发工程师的岗位职责
2013/11/18 职场文书
兼职学生的自我评价
2013/11/24 职场文书
高职教师岗位职责
2013/12/24 职场文书
高二地理教学反思
2014/01/24 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
中秋客户感谢信
2015/01/22 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
django中websocket的具体使用
2022/01/22 Python