vue 基于abstract 路由模式 實(shí)現(xiàn)頁(yè)面內(nèi)嵌

abstract 路由模式

abstract 是vue路由中的第三種模式，本身是用來(lái)在不支持瀏覽器API的環(huán)境中，充當(dāng)fallback，而不論是hash還是history模式都會(huì)對(duì)瀏覽器上的url產(chǎn)生作用，本文要實(shí)現(xiàn)的功能就是在已存在的路由頁(yè)面中內(nèi)嵌其他的路由頁(yè)面，而保持在瀏覽器當(dāng)中依舊顯示當(dāng)前頁(yè)面的路由path，這就利用到了abstract這種與瀏覽器分離的路由模式。

路由示例

export?const?routes?=?[
??{
????path:?"/",
????redirect:?"abstract-route",
??},
??{
????path:?"/embed-route",
????name:?"embedded",
????component:?()?=>
??????import(/*?webpackChunkName:?"embed"?*/?"../views/embed.vue"),
??},
??{
????path:?"/abstract-route",
????name:?"abstract",
????component:?()?=>
??????import(/*?webpackChunkName:?"abstract"?*/?"../views/abstract.vue"),
??},
];

const?router?=?new?VueRouter({
??mode:?"history",
??base:?process.env.BASE_URL,
??routes,
});

本次示例有兩個(gè)路由，分別為abstract，embedded，其中abstract視圖上展開(kāi)一個(gè)抽屜，抽屜當(dāng)中顯示embedded的視圖。即：

//?abstract?views



//?embedded?views

router-drawer 封裝

當(dāng)前項(xiàng)目默認(rèn)是history 的路由模式，因此在進(jìn)入abstract頁(yè)面時(shí)，瀏覽器Url為http://127.0.0.1:8010/abstract-route，而router-drawer要做的是在此基礎(chǔ)上，重新實(shí)例化一個(gè)abstract模式的路由，然后在組件當(dāng)中利用去掛載要被內(nèi)嵌的目標(biāo)頁(yè)面。即：

通過(guò)打印日志可以得出兩個(gè)實(shí)例化的路由：

這樣即可實(shí)現(xiàn)在不改變當(dāng)前頁(yè)面path的前提下加載其他路由中的views了。

• 代碼示例:

• https://github.com/jiwenjiang/element-starter/blob/90bcc44d2d2c8376ef8699a3c8631e4cd6369422/src/components/router-drawer.vue#L27