文章目录
一、如何实现路由重新加载？1-1、设置要刷新的组件v-if，通过v-if实现页面组件层重载。1-2、对外暴露main.js中的 new Vue()实例。1-3、来到我们的路由守卫配置页面。1-4、配置router.beforeEach钩子守卫。一、如何实现路由重新加载？
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显示组件就会重载，这样也不会影响到如左侧或者上方的侧边栏、顶部栏等等。
