vue 进入到一个新路由页面后，路由组件页面缓存，如何实现路由组件刷新重载？

一、如何实现路由重新加载？

1-1、设置要刷新的组件v-if，通过v-if实现页面组件层重载。

<template><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main v-if="isRouterCache">  <router-view  /></el-main></el-container></el-container>
</template>
<script>
export default {name:'Layout',data () {return {isRouterCache: true}},methods: {reload () {this.isRouterCache = falsethis.$nextTick(() => (this.isRouterCache = true))}   }
}
</script>

注意：当前组件其实是layout.vue组件他的上一层还有app.vue组件。

1-2、对外暴露main.js中的 new Vue()实例。

1-3、来到我们的路由守卫配置页面。

1-4、配置router.beforeEach钩子守卫。

router.beforeEach((to, from, next) => {// 此处用于判断  然后刷新main组件$vue.$root.$children[0].$children[0]就相当于与layout组件  对应可以获取到reload方法，从而实现刷新。if ($vue.$root.$children[0].$children[0]) {$vue.$root.$children[0].$children[0].reload()}next()}
})

此处我们可以通过$vue去获取到当前组件的实例，再次通过$root去拿到我们的根组件,第一次 $children[0] 相当于app.vue,再一次相当于layout.vue组件，我们就可以通过这个组件实例去调用里面methods的方法。

这样既我们每次变更路由时，对应的main显示组件就会重载，这样也不会影响到如左侧或者上方的侧边栏、顶部栏等等。