vue-router嵌套路由方式(頁(yè)面路徑跳轉(zhuǎn)但頁(yè)面顯示空白)
如圖所示從歡迎頁(yè)跳轉(zhuǎn)至用戶列表
歡迎頁(yè)：路徑---welcome
用戶頁(yè)：路徑---users
可以看到路徑發(fā)生了跳轉(zhuǎn)，但跳轉(zhuǎn)后的用戶列表頁(yè)面顯示空白。路由嵌套代碼如下：
查詢相關(guān)資料，有兩種解決方案
1.path路徑不用攜帶/ （未解決）
2.在home頁(yè)面需添加router-view標(biāo)簽
在home頁(yè)面的template下添加<router-view> </router-view>后，用戶頁(yè)面占據(jù)了整個(gè)頁(yè)面，而我們需要將用戶頁(yè)面展示在主頁(yè)面的右半部分：
查詢相關(guān)資料可知，<router-view> </router-view>標(biāo)簽的位置不對(duì)。該標(biāo)簽的意思是將子路由的部分進(jìn)行一個(gè)展示，重新調(diào)整位置
將<router-view> </router-view>寫在主體<el-main></el-main>內(nèi)：
解決問(wèn)題！
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無(wú)限循環(huán)問(wèn)題
- vue中@路徑無(wú)法跳轉(zhuǎn)到指定文件的解決
- Nginx配置Vue項(xiàng)目,無(wú)法按路徑跳轉(zhuǎn)及刷新404的解決方案
- vue-router解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)的問(wèn)題
- 解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問(wèn)題
- vue路由相對(duì)路徑跳轉(zhuǎn)方式
- vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)問(wèn)題
- vue頁(yè)面不能根據(jù)路徑進(jìn)行跳轉(zhuǎn)的解決方法
相關(guān)文章
這篇文章主要介紹了vue如何使用bable將es6轉(zhuǎn)譯為es5問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
大前端代碼重構(gòu)之事件攔截iOS?Flutter?Vue示例分析
這篇文章主要為大家介紹了大前端代碼重構(gòu)之事件攔截iOS?Flutter?Vue示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
在計(jì)算字符數(shù)時(shí),一般情況下,英文字符、數(shù)字和大部分符號(hào)都可以被視為占一個(gè)字符長(zhǎng)度,因?yàn)樗鼈兪菃蝹€(gè)字節(jié),然而,對(duì)于某些特殊字符,如表情符號(hào)和部分非英文字符,會(huì)被認(rèn)為占據(jù)了多個(gè)字符長(zhǎng)度,本文給介紹了vue處理emoji表情占位符的操作方法,需要的朋友可以參考下2024-06-06
Vue 菜單欄點(diǎn)擊切換單個(gè)class(高亮)的方法
今天小編就為大家分享一篇Vue 菜單欄點(diǎn)擊切換單個(gè)class(高亮)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
el-table樹(shù)形數(shù)據(jù)量過(guò)大,導(dǎo)致頁(yè)面卡頓問(wèn)題及解決
這篇文章主要介紹了el-table樹(shù)形數(shù)據(jù)量過(guò)大,導(dǎo)致頁(yè)面卡頓問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue插件vue-resource的使用筆記（小結(jié)）
本篇文章主要介紹了vue插件vue-resource的使用筆記（小結(jié)），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Element-Plus Select組件實(shí)現(xiàn)滾動(dòng)分頁(yè)加載功能
Element-Plus的select組件并沒(méi)有自帶滾動(dòng)分頁(yè)加載的功能,其雖然提供了自定義下拉菜單的底部的方式可以自定義上一頁(yè)及下一頁(yè)操作按鈕的方式進(jìn)行分頁(yè)加載切換,這篇文章主要介紹了Element-Plus Select組件實(shí)現(xiàn)滾動(dòng)分頁(yè)加載功能,需要的朋友可以參考下2024-03-03
SVG（Scalable?Vector?Graphics）可縮放矢量圖形，是一種用于描述基于二維的矢量圖形的?XML?標(biāo)記語(yǔ)言，其基本矢量顯示對(duì)象包括矩形、圓、橢圓、多邊形、直線、任意曲線等，還能顯示文字對(duì)象和嵌入式外部圖像2023-02-02
vue3切換路由時(shí)頁(yè)面空白問(wèn)題解決辦法
在使用Vue3時(shí),有時(shí)頁(yè)面修改后會(huì)出現(xiàn)空白,這篇文章主要介紹了vue3切換路由時(shí)頁(yè)面空白問(wèn)題解決辦法,文中介紹的步驟可以有效解決頁(yè)面空白問(wèn)題,需要的朋友可以參考下2024-09-09
vue?contextmenujs鼠標(biāo)右鍵菜單高度不夠顯示不全的問(wèn)題及解決方法
這篇文章主要介紹了使用vue-contextmenujs鼠標(biāo)右鍵菜單時(shí)，當(dāng)高度不夠時(shí)顯示不全的問(wèn)題,大家需要注意本文給提供的解決方案雖然能夠解決現(xiàn)有問(wèn)題，但是如果組件升級(jí)了，想要使用最新升級(jí)后的組件，還要再次修改代碼，需要的朋友可以參考下2022-07-07