鍍金池/ 問(wèn)答/HTML/ 在App.vue中引入的組件，如何和<router-view/>同時(shí)

在App.vue中引入的組件，如何和<router-view/>同時(shí)加載/卸載

圖片描述

如圖，我有header和footer 兩個(gè)公共組件，是在app.vue中引入的，現(xiàn)在導(dǎo)致一個(gè)問(wèn)題就是我在頁(yè)面刷新的時(shí)候，router-view中的代碼會(huì)被卸載重新加載，但是app.vue中的header和footer卻不會(huì)被卸載

導(dǎo)致，我頁(yè)面刷新的時(shí)候，會(huì)有短暫的時(shí)間出現(xiàn)整個(gè)頁(yè)面只有header和footer的情況

我知道將header和footer在每個(gè)組件中引入，不在app.vue中引入能解決這個(gè)問(wèn)題，但是我覺(jué)得在每個(gè)組件都引入一遍header和footer好像不太好，比如頁(yè)面有幾十個(gè)，總不能每個(gè)都引入一遍吧 這也應(yīng)該不是正確的處理方式吧

回答
編輯回答
下墜

named-views 確實(shí)適合它這種，要同級(jí)的

2017年8月14日 07:00
編輯回答
單眼皮

我這兒有那么點(diǎn)兒想法，在這人拋磚引玉一下，希望能有更好的解決方法并能對(duì)你有所幫助：

  • 命名視圖：鏈接 給頭部和底部也整一個(gè)router-view，只是里面就放一個(gè)組件而已
  • 添加一個(gè)全局的loading，給頁(yè)面一個(gè)過(guò)渡效果，這樣的話用戶(hù)體驗(yàn)應(yīng)該好一些！
2017年8月23日 13:04
編輯回答
司令

默認(rèn)header和footer隱藏，在router-view加載完畢之后再顯示.
修改了一下代碼，刪掉了next();全局的守衛(wèi)是不接受next()函數(shù)的

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

附上一張路由守衛(wèi)和生命周期的執(zhí)行順序，在afterEach中是不能使用組件的this的；
clipboard.png

2017年2月16日 04:41