vue-router嵌套路由方式(頁面路徑跳轉(zhuǎn)但頁面顯示空白)
更新時(shí)間：2022年04月29日 09:57:26 作者：weixin_46326251
這篇文章主要介紹了vue-router嵌套路由方式(頁面路徑跳轉(zhuǎn)但頁面顯示空白)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
如圖所示從歡迎頁跳轉(zhuǎn)至用戶列表
歡迎頁：路徑---welcome
用戶頁：路徑---users
可以看到路徑發(fā)生了跳轉(zhuǎn)，但跳轉(zhuǎn)后的用戶列表頁面顯示空白。路由嵌套代碼如下：
查詢相關(guān)資料，有兩種解決方案
1.path路徑不用攜帶/ （未解決）
2.在home頁面需添加router-view標(biāo)簽
在home頁面的template下添加<router-view> </router-view>后，用戶頁面占據(jù)了整個(gè)頁面，而我們需要將用戶頁面展示在主頁面的右半部分：
查詢相關(guān)資料可知，<router-view> </router-view>標(biāo)簽的位置不對。該標(biāo)簽的意思是將子路由的部分進(jìn)行一個(gè)展示，重新調(diào)整位置
將<router-view> </router-view>寫在主體<el-main></el-main>內(nèi)：
解決問題！
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無限循環(huán)問題
- vue中@路徑無法跳轉(zhuǎn)到指定文件的解決
- Nginx配置Vue項(xiàng)目,無法按路徑跳轉(zhuǎn)及刷新404的解決方案
- vue-router解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)的問題
- 解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問題
- vue路由相對路徑跳轉(zhuǎn)方式
- vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)問題
- vue頁面不能根據(jù)路徑進(jìn)行跳轉(zhuǎn)的解決方法
相關(guān)文章
這篇文章主要介紹了vue如何預(yù)覽后端傳來的二進(jìn)制圖片，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue觸發(fā)隱藏input file的方法實(shí)例詳解
這篇文章主要介紹了Vue觸發(fā)隱藏input file的方法實(shí)例詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-08-08
Vue實(shí)現(xiàn)簡單可擴(kuò)展甘特圖的方法詳解
Ganttastic是一個(gè)小型的Vue.js組件，用于在Web應(yīng)用程序上呈現(xiàn)一個(gè)可配置的、可拖動(dòng)的甘特圖。本文就將用它來實(shí)現(xiàn)簡單可擴(kuò)展的甘特圖，感興趣的可以嘗試一下2022-11-11
基于Vue中this.$options.data()的this指向問題
這篇文章主要介紹了基于Vue中this.$options.data()的this指向問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對應(yīng)的PDF
這篇文章主要為大家詳細(xì)介紹了vue如何使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對應(yīng)的PDF,文中的示例代碼簡潔易懂,感興趣的小伙伴可以學(xué)習(xí)一下2023-08-08
這篇文章主要介紹了安裝多版本Vue-CLI的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù)的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù)，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以參考一下2023-06-06
基于element-ui中el-select下拉框選項(xiàng)過多的優(yōu)化方案
這篇文章主要介紹了基于element-ui中el-select下拉框選項(xiàng)過多的優(yōu)化方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
本篇文章主要介紹了vue.js之vue-cli腳手架的搭建詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了vue使用axios跨域請求數(shù)據(jù)的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10