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 = false
     this.$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显示组件就会重载，这样也不会影响到如左侧或者上方的侧边栏、顶部栏等等。