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() } })

資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

4.query傳值 watch監聽頁面$route變化然后更新

 

5.provide / inject 組合

 

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

定義ref,然后調用相對應的方法，最好給每個頁面都提供相同的方法

this.$refs.chartView.refresh()

就解決了點擊當前路由沒有刷新的問題