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里写一个swing把数据插入数据库
Dec 10 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
js html实现计算器功能
Nov 13 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
vue路由教程之静态路由
Sep 03 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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
一个显示天气预报的程序
2006/10/09 PHP
php MessagePack介绍
2013/10/06 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
浅谈php://filter的妙用
2019/03/05 PHP
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
python遍历类中所有成员的方法
2015/03/18 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
python-opencv颜色提取分割方法
2018/12/08 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
python 实现兔子生兔子示例
2019/11/21 Python
python3跳出一个循环的实例操作
2020/08/18 Python
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
初中校园之声广播稿
2014/01/15 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
五星级酒店宣传口号
2015/12/25 职场文书