在App.vue中引入的组件，如何和<router-view/>同时加载/卸载

Question

如图，我有header和footer 两个公共组件，是在app.vue中引入的，现在导致一个问题就是我在页面刷新的时候，router-view中的代码会被卸载重新加载，但是app.vue中的header和footer却不会被卸载

导致，我页面刷新的时候，会有短暂的时间出现整个页面只有header和footer的情况

我知道将header和footer在每个组件中引入，不在app.vue中引入能解决这个问题，但是我觉得在每个组件都引入一遍header和footer好像不太好，比如页面有几十个，总不能每个都引入一遍吧 这也应该不是正确的处理方式吧

Answer 1

默认header和footer隐藏，在router-view加载完毕之后再显示.
修改了一下代码，删掉了next();全局的守卫是不接受next()函数的

router.afterEach((to, from) => {
    showHeader = showFooter = true;
})

附上一张路由守卫和生命周期的执行顺序，在afterEach中是不能使用组件的this的；

Answer 2

我这儿有那么点儿想法，在这人抛砖引玉一下，希望能有更好的解决方法并能对你有所帮助：

• 命名视图：链接 给头部和底部也整一个router-view，只是里面就放一个组件而已
• 添加一个全局的loading，给页面一个过渡效果，这样的话用户体验应该好一些！

Answer 3

named-views 确实适合它这种，要同级的