刷新路由有几种方式，都有各自的优缺点
之前一直都是使用location.reload（）来刷新页面，但在最近写代码中通过查看大家对此的解决方法，找到了一个比较实用的方法，vue的provide与inject结合使用，这个方法解决了我在项目中遇到的问题，那个时刻确实兴奋。哈哈哈
使用场景：
一个下拉框控制整个系统，如一个数据中心的下拉框，切换数据中心，所有的api都要重新获取，页面数据都随之变化，总之最根本要解决的问题就是切换数据中心后，刷新页面重新请求api。我使用的provide + inject方法。
与其他方法的区别：刷新时不会出现瞬间空白的页面，很实用。
注册、使用
注册：provide注册
使用：在操作刷新的页面注入，用inject注入inject: ['reload'],
1、第一种方法：provide 与 inject结合使用（亲测有效的比较实用的方法）
1、1 注册
/**
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 使用
/**
刷新页面操作的页面，如我案例中切换数据中心的页面
*/
<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: '青岛数据中心'
},
{
label: shanghai,
value: '上海数据中心'
}
],
currentCluster: {
value: ''
}
}
},
methods: {
...mapActions([
'SwitchCluster' // 设置localstorage 和当前集群
]),
// 切换集群，设置当前store的当前集群
switchCluster(clusterValue) {
// 通过当前的集群获取集群对应的label的object用于api
const current_cluster = this.clusterList.find(item => item.value === clusterValue)
// 设置localstorage 和当前集群后重新刷新页面请求api
this.SwitchCluster(current_cluster).then(res => {
this.reload()
}).catch(err => {
console.log(err)
})
},
/**
store的app.js 主要用于设置localstorage的数据中心id和当前的数据中心
*/
import { setCluster, getCluster, getClusterList } from '@/utils/cluster'
const app = {
state: {
clusterId: getCluster(),
currentcluster: '',
},
mutations: {
// 当前集群
SET_CURRENT_CLUSTERS: (state, data) => {
state.currentcluster = data
},
// 当前集群的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()
强制熟悉页面、相当于f5，整个页面重新加载，会出现一个瞬间的空白页面，体验不佳
3、第三种方法 this.$router.go(0）
当前页面跳转到当前页面，相当于刷新当前页面，也会出现一个空白页面，体验不佳。
this.$router.go(n）：表示页面向前或向后跳转多少个页面，0表示跳转到当前页面。
4、 第四种方法 this.$router.replace
不会出现空白页面。只有地址栏有个快速的切换过程，但是在浏览器的后退不能进行后退了。
