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

图片描述

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

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

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

回答:

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

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

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

回答:

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

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注