vue同頁面多路由懶加載-及可能存在問題的解決方式

先上圖,再解釋
在這裏插入圖片描述在這裏插入圖片描述圖一是多路由頁面,圖二是路由文件。從圖一可以看出每個router-view對應的name都不一樣。從圖二可以看出層路由對應的組件加載方式要跟圖一中的name相對應,並且圖二的路由層在跟圖一對應的頁面中要加上components層,多一個s結尾,裏面的的方法名就是圖一路由的name值,裏面還可以照樣用懶加載的方式。

頁面上其他的路由在路由文件中也跟圖二是一樣的寫法。

附送可能存在的問題解決:
在同頁面多路由的情況下,如果像我這邊有加上導航菜單需要對應的路由,那刷新會導致默認顯示第一個菜單去,頁面內容原本是在第三個的路由上顯示結果刷新頁面加載第一個路由導致頁面內容不顯示問題。我們可以通過在多路由的頁面中的mounted週期方法中去判斷路由的前半部分是否存在,存在的話則跳轉菜單默認項以及顯示哪個要加載的路由
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章