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的視圖。即：

<template> <div> <RouterDrawer :visible.sync='visible' :path='{ name: ’embedded’ }' size='50%' ></RouterDrawer> <el-button @click='visible = true'>open drawer</el-button> </div></template>// embedded views<template> <div> embedded views </div></template>

當(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)中利用<router-view />去掛載要被內(nèi)嵌的目標(biāo)頁(yè)面。即：

<template> <el-drawer :visible.sync='visible' v-bind='$attrs' :before-close='handleClose' > <router-view /> </el-drawer></template><script>import { routes } from '../router/index';import VueRouter from 'vue-router';export default { name: 'router-drawer', props: { path: { type: Object, required: true, }, visible: { type: Boolean, required: true, default: false, }, }, // 此處實(shí)例化一個(gè)新的router來(lái)配合當(dāng)前頁(yè)面的router-view router: new VueRouter({ mode: 'abstract', base: '/', routes, }), methods: { handleClose() { this.$emit('update:visible', false); }, }, mounted() { console.log('drawer router', this.$router); this.$router.push(this.path); },};</script>

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

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

代碼示例

以上就是vue 基于abstract 路由模式 實(shí)現(xiàn)頁(yè)面內(nèi)嵌的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于vue 實(shí)現(xiàn)頁(yè)面內(nèi)嵌的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！