abstract 是vue路由中的第三種模式，本身是用來在不支持瀏覽器API的環(huán)境中，充當(dāng)fallback，而不論是hash還是history模式都會對瀏覽器上的url產(chǎn)生作用，本文要實現(xiàn)的功能就是在已存在的路由頁面中內(nèi)嵌其他的路由頁面，而保持在瀏覽器當(dāng)中依舊顯示當(dāng)前頁面的路由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,});

本次示例有兩個路由，分別為abstract，embedded，其中abstract視圖上展開一個抽屜，抽屜當(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)前項目默認(rèn)是history 的路由模式，因此在進(jìn)入abstract頁面時，瀏覽器Url為http://127.0.0.1:8010/abstract-route，而router-drawer要做的是在此基礎(chǔ)上，重新實例化一個abstract模式的路由，然后在組件當(dāng)中利用<router-view />去掛載要被內(nèi)嵌的目標(biāo)頁面。即：

<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, }, }, // 此處實例化一個新的router來配合當(dāng)前頁面的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>

通過打印日志可以得出兩個實例化的路由：

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

代碼示例

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