刷新路由有幾種方式媳溺，都有各自的優(yōu)缺點(diǎn)
之前一直都是使用location.reload（）來刷新頁面戏阅，但在最近寫代碼中通過查看大家對(duì)此的解決方法橙凳，找到了一個(gè)比較實(shí)用的方法罪针，vue的provide與inject結(jié)合使用彭羹，這個(gè)方法解決了我在項(xiàng)目中遇到的問題，那個(gè)時(shí)刻確實(shí)興奮泪酱。哈哈哈
使用場景：
一個(gè)下拉框控制整個(gè)系統(tǒng)派殷，如一個(gè)數(shù)據(jù)中心的下拉框还最，切換數(shù)據(jù)中心，所有的api都要重新獲取毡惜，頁面數(shù)據(jù)都隨之變化拓轻，總之最根本要解決的問題就是切換數(shù)據(jù)中心后，刷新頁面重新請(qǐng)求api虱黄。我使用的provide + inject方法悦即。
與其他方法的區(qū)別：刷新時(shí)不會(huì)出現(xiàn)瞬間空白的頁面，很實(shí)用橱乱。
注冊(cè)辜梳、使用
注冊(cè)：provide注冊(cè)
使用：在操作刷新的頁面注入，用inject注入inject: ['reload'],
1泳叠、第一種方法：provide 與 inject結(jié)合使用（親測(cè)有效的比較實(shí)用的方法）
1作瞄、1 注冊(cè)
/**
App.vue
*/
<template>
<div id="app">
<router-view v-if="isRouterAlice"/>
</div>
</template>
<script>
export default {
name: 'App',
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlice: true
}
},
methods: {
reload() {
this.isRouterAlice = false
this.$nextTick(function() {
this.isRouterAlice = true
})
}
}
}
</script>
1、2 使用
/**
刷新頁面操作的頁面危纫，如我案例中切換數(shù)據(jù)中心的頁面
*/
<template>
<el-scrollbar wrap-class="scrollbar-wrapper">
<!-- 集群 -->
<el-select
v-if="!isCollapse"
v-model="currentCluster.value"
class="data-center-selector"
@change="switchCluster(currentCluster.value)">
<el-option
v-for="(item, index) in clusterList"
:key="index"
:label="item.lable"
:value="item.value"
/>
</el-select>
</template>
<script>
import { mapActions } from 'vuex'
export default {
components: { SidebarItem },
inject: ['reload'],
data() {
return {
clusterList: [
{
label:qingdao,
value: '青島數(shù)據(jù)中心'
},
{
label: shanghai,
value: '上海數(shù)據(jù)中心'
}
],
currentCluster: {
value: ''
}
}
},
methods: {
...mapActions([
'SwitchCluster' // 設(shè)置localstorage 和當(dāng)前集群
]),
// 切換集群宗挥，設(shè)置當(dāng)前store的當(dāng)前集群
switchCluster(clusterValue) {
// 通過當(dāng)前的集群獲取集群對(duì)應(yīng)的label的object用于api
const current_cluster = this.clusterList.find(item => item.value === clusterValue)
// 設(shè)置localstorage 和當(dāng)前集群后重新刷新頁面請(qǐng)求api
this.SwitchCluster(current_cluster).then(res => {
this.reload()
}).catch(err => {
console.log(err)
})
},
/**
store的app.js 主要用于設(shè)置localstorage的數(shù)據(jù)中心id和當(dāng)前的數(shù)據(jù)中心
*/
import { setCluster, getCluster, getClusterList } from '@/utils/cluster'
const app = {
state: {
clusterId: getCluster(),
currentcluster: '',
},
mutations: {
// 當(dāng)前集群
SET_CURRENT_CLUSTERS: (state, data) => {
state.currentcluster = data
},
// 當(dāng)前集群的id
SET_CLUSTER_ID: (state, data) => {
state.clusterId = data
}
},
actions: {
// 切換集群 params: object currentCluster
SwitchCluster: ({ commit }, currentCluster) => {
commit('SET_CLUSTER_ID', currentCluster.label)
setCluster(currentCluster.label)
commit('SET_CURRENT_CLUSTERS', currentCluster.value)
}
}
}
export default app
2、第二種方法 window.location.reload()
強(qiáng)制熟悉頁面、相當(dāng)于f5丹喻，整個(gè)頁面重新加載犀盟，會(huì)出現(xiàn)一個(gè)瞬間的空白頁面，體驗(yàn)不佳
3搪桂、第三種方法 this.$router.go(0）
當(dāng)前頁面跳轉(zhuǎn)到當(dāng)前頁面，相當(dāng)于刷新當(dāng)前頁面盯滚，也會(huì)出現(xiàn)一個(gè)空白頁面踢械，體驗(yàn)不佳。
this.$router.go(n）：表示頁面向前或向后跳轉(zhuǎn)多少個(gè)頁面魄藕，0表示跳轉(zhuǎn)到當(dāng)前頁面内列。
4、 第四種方法 this.$router.replace
不會(huì)出現(xiàn)空白頁面背率。只有地址欄有個(gè)快速的切換過程话瞧，但是在瀏覽器的后退不能進(jìn)行后退了。
