Vue 刷新当前路由的实现代码
更新时间：2019年09月26日 08:21:23 作者：waterCloud
这篇文章主要介绍了Vue 刷新当前路由的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
开发项目的时候突然接到了这个需求，实验过后，解决方法也蛮多种，下面就讲下常规的几种方案
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()
就解决了点击当前路由没有刷新的问题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vue项目全局配置页面缓存之实现按需读取缓存的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧2018-08-08
这篇文章主要介绍了vue-resize深度解读，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
下面小编就为大家带来一篇vue-ajax小封装实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了Vue2.0实现歌手列表滚动及右侧快速入口功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
本篇文章主要介绍了浅谈Vue2.0父子组件间事件派发机制，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
今天小编就为大家分享一篇vue 的点击事件获取当前点击的元素方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue3通过ref操作Dom元素及hooks的使用方法,需要的朋友可以参考下2023-01-01
vue组件之间的通信方式有很多种,props/emit,event bus,vuex,provide/inject等,还有一种通信方式就是$attrs和$listeners,下面这篇文章主要给大家介绍了关于vue2.x中$attrs和$listeners的相关资料,需要的朋友可以参考下2022-03-03
在项目需求中我们会遇到国际化的中英文切换,这篇文章主要给大家介绍了关于前端VUE双语实现方案的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
在Vue.js中,ref属性是组件的重要组成部分,它决定了组件如何获取DOM元素,本文将探讨ref属性的使用方法和优势,并通过有趣的示例展示其强大的功能,需要的朋友可以参考下2025-03-03
最新评论