動(dòng)態(tài)路由 & 嵌套路由

參考實(shí)例代碼:http://jsfiddle.net/yyx990803/L7hscd8h/

???????????????????????? http://jsfiddle.net/yyx990803/4xfa2f19/?

動(dòng)態(tài)路由:某種模式匹配到的所有路由,全都映射到同個(gè)組件

eg:

const User = { template : ' <div> User <div> '}

const router = new vueRouter({ routes : [{

???? path : ' /user/:id ',???????? // 動(dòng)態(tài)路由參數(shù),以 ‘ : ’ 開頭,當(dāng)匹配到一個(gè)路由時(shí),參數(shù)值???? 會(huì)被設(shè)置到 this.$route.params,可在每個(gè)組件內(nèi)使用(const user = { template : '<div>user {{ $route.params.id }} </div>'})下附$route參數(shù)表

???? component : User

}]})


$route參數(shù)表

嵌套路由 : 一個(gè)被渲染組件可以包含自己的嵌套 <router-view>

const user = { template :' <div> user {{ $route.params.id }}

???????????????????????????????????????? <router-view><router-view>

??????????????????????? </div>'}

要在頁面中渲染嵌套的 <router-view>,需要在 vueRouter 的參數(shù)中使用 children 配置

以 / 開頭的嵌套路徑會(huì)被認(rèn)為是根路徑

命名視圖:當(dāng)頁面上需要同時(shí)顯示多個(gè)視圖時(shí)。

eg:https://jsfiddle.net/posva/6du90epg/


最后編輯于
?著作權(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)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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