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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
js严格模式总结(分享)
Aug 22 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
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格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
javascript call方法使用说明
2010/01/11 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
ES6的新特性概览
2016/03/10 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python爬虫 正则表达式解析
2019/09/28 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
机械设计及其自动化专业推荐信
2013/10/31 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
50岁生日感言
2014/01/23 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
房地产开发项目建议书
2014/05/16 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
不同意离婚答辩状
2015/05/22 职场文书
运动会宣传稿50字
2015/07/23 职场文书
Golang并发工具Singleflight
2022/05/06 Golang
nginx静态资源的服务器配置方法
2022/07/07 Servers