2、vue-router之什么是嵌套路由

1.嵌套路由的使用場(chǎng)景是什么呢?

大家都知道選項(xiàng)卡,在選項(xiàng)卡中,頂部有數(shù)個(gè)導(dǎo)航欄,中間的主體顯示的是內(nèi)容;這個(gè)時(shí)候,整個(gè)頁(yè)面是一個(gè)路由,然后點(diǎn)擊選項(xiàng)卡切換不同的路由來(lái)展示不同的內(nèi)容,這個(gè)時(shí)候就是路由中嵌套路由。

2.具體是怎么實(shí)現(xiàn)的?

① 為了演示,我們現(xiàn)在view文件夾下新建一個(gè)title1.vuetitle2.vue用來(lái)存放不同的內(nèi)容

② 現(xiàn)在我們?cè)?code>router 》 index.js 中將這上面兩個(gè)新建的組件引入進(jìn)來(lái)并填寫(xiě)路徑,這里的Title1Title2是作為test.vue頁(yè)面的子路由,所以要寫(xiě)在children屬性下

這里需要提個(gè)醒的就是填寫(xiě)children子路由的path不要加/

③ 然后我們?cè)偃サ絫est.vue中敲:
在這里提個(gè)醒,在to后面寫(xiě)路由路徑的時(shí)候,一定到帶上絕對(duì)路徑,也就是要把test這個(gè)父路由路徑寫(xiě)進(jìn)去"/test/title1"

④ 最后我們進(jìn)入瀏覽器點(diǎn)擊不同的標(biāo)題就可以看到不同內(nèi)容的展示

參考學(xué)習(xí)
https://router.vuejs.org/zh-cn/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 上一次給大家簡(jiǎn)單說(shuō)了下什么是動(dòng)態(tài)路由現(xiàn)在我們來(lái)講講嵌套路由。GitHub:https://github.com/E...
    ComfyUI閱讀 14,663評(píng)論 12 26
  • 目錄 - 1.vue-router響應(yīng) 路由參數(shù) 的變化 - 2.vue-router如何定義嵌套路由? - 3....
    我跟你蔣閱讀 5,822評(píng)論 0 14
  • 回憶: 我們知道,h5的history或者h(yuǎn)ash幫助我們解決了,變化url跳轉(zhuǎn)頁(yè)面不發(fā)送請(qǐng)求,并且我們能監(jiān)聽(tīng)到u...
    LoveBugs_King閱讀 3,818評(píng)論 0 5
  • 1路由,其實(shí)就是指向的意思,當(dāng)我點(diǎn)擊頁(yè)面上的home按鈕時(shí),頁(yè)面中就要顯示home的內(nèi)容,如果點(diǎn)擊頁(yè)面上的abou...
    你好陌生人丶閱讀 1,774評(píng)論 0 6
  • 一、前言 要學(xué)習(xí)vue-router就要先知道這里的路由是什么?為什么我們不能像原來(lái)一樣直接用 標(biāo)簽編寫(xiě)鏈接哪?...
    浪里行舟閱讀 68,148評(píng)論 12 203

友情鏈接更多精彩內(nèi)容