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中的常见排序算法
Mar 27 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
微信小程序实现授权登录
May 15 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
javascript自定义加载loading效果
Sep 15 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
php 8小时时间差的解决方法小结
2009/12/22 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python调用摄像头显示图像的实例
2018/08/03 Python
测试工程师岗位职责
2013/11/28 职场文书
应届大学生求职信
2013/12/01 职场文书
九年级英语教学反思
2014/01/31 职场文书
英语专业自荐书
2014/06/13 职场文书
圣诞节开幕词
2015/01/29 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
在Docker容器中部署SQL Server
2022/04/11 Servers
Win11开始菜单添加休眠选项
2022/04/19 数码科技