關於vue單頁面應用總是先出現主頁一閃而過的現象

2021-09-07 18:47:03 字數 1084 閱讀 4955

問題描述:每次強制重新整理登陸頁面時,總是會出現主頁一閃而過的現象,如果主頁上有請求,還會請求後台資料。感覺不太正常,所以想到研究下為什麼,然後去掉這個主頁一閃而過的現象

class="

">

if="

$route.meta.fullscreen

">

else-if="

$route.meta.homepages

">

也就是說:當meta資訊fullscreen為true時,我是讓全屏展示的;homepages為true時,就會展示導航欄+router-view內容;然後else的時候呢,就展示登入之後的內容:頭部+選單+內容。

問題其實就出現在這個else裡面。

我的根路由是設定了meta的homepages的,所以根路由進來是第二塊展示;然後從根路由跳轉登入等等都沒有問題。但是出現問題的是:比如我localhost/#/login,這樣重新整理網頁的時候,你就會發現主頁一閃而過的現象。

我在路由導航裡一步步除錯發現,當你這麼重新整理的時候,to:是"/login",from:是"/",也就是說路由導航認定你是從根路由去login路由,至於一閃而過的現場,難道是from路由就預設渲染了一次?

但是我的根路由是設定了路由元資訊homepages的,也不該走到else裡面去啊?

除錯發現這種直接重新整理localhost/#/login的情況,from路由雖然是"/",但是它卻沒有meta資訊,meta屬性是個空物件{},所以它就走入了else的展示,預設渲染了頁面,然後再通過路由導航守衛攔截進入的登入頁面。這應該就是問題的根源:那麼我只需要讓那個根路由不走進else就行了。所以我再加個條件:

class="

">

if="

$route.meta.fullscreen

">

else-if="

$route.meta.homepages

">

else-if="

$route.fullpath != '/'

">

這樣問題就解決了。當然不知道是不是最好的方式,有更好的方式,希望大家不吝賜教。

vue單頁面應用打包問題

vue單頁面應用打包各資源檔案的路徑應注意的地方 頁面所用的資源 非css引入的 修改如下 在config配置檔案下修改index.js index.js是打包配置首頁路徑檔案,dev配置生產環境 npm run dev 中的各資源路徑問題,build配置發布 npm run build 後的各資源...

vue單頁應用頁面快取方案

首先我想到的是方案a 方案一 vue的keep alive元件 具體使用如下 這樣所有的頁面都會進行快取。包裹動態元件時,會快取不活動的元件例項,而不是銷毀它們。和 相似,是乙個抽象元件 它自身不會渲染乙個 dom 元素,也不會出現在父元件鏈中。當元件在 內被切換,它的 activated 和 de...

Vue單頁面應用手動搭建基礎

1.vue檔案 vue檔案由三部分組成 template style script html template cssstyle js script 2.vue loader瀏覽器本身並不認為.vue檔案,所以必須對.vue檔案進行載入解析,此時需要vue loader 需要注意的是vue load...