vue 基於abstract 路由模式 實現頁面內嵌的示例程式碼
阿新 • • 發佈:2020-12-15
abstract 路由模式
abstract 是vue路由中的第三種模式,本身是用來在不支援瀏覽器API的環境中,充當fallback,而不論是hash還是history模式都會對瀏覽器上的url產生作用,本文要實現的功能就是在已存在的路由頁面中內嵌其他的路由頁面,而保持在瀏覽器當中依舊顯示當前頁面的路由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檢視上展開一個抽屜,抽屜當中顯示embedded的檢視。即:
<template> <div> <RouterDrawer :visible.sync="visible" :path="{ name: 'embedded' }" size="50%" title="drawer comps" ></RouterDrawer> <el-button @click="visible = true">open drawer</el-button> </div> </template> // embedded views <template> <div> embedded views </div> </template>
router-drawer 封裝
當前專案預設是history 的路由模式,因此在進入abstract頁面時,瀏覽器Url為http://127.0.0.1:8010/abstract-route,而router-drawer要做的是在此基礎上,重新例項化一個abstract模式的路由,然後在元件當中利用<router-view />
去掛載要被內嵌的目標頁面。即:
<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,default: false,// 此處例項化一個新的router來配合當前頁面的router-view router: new VueRouter({ mode: "abstract",base: "/",}),methods: { handleClose() { this.$emit("update:visible",false); },mounted() { console.log("drawer router",this.$router); this.$router.push(this.path); },}; </script>
通過列印日誌可以得出兩個例項化的路由:
這樣即可實現在不改變當前頁面path的前提下載入其他路由中的views了。
程式碼示例
以上就是vue 基於abstract 路由模式 實現頁面內嵌的示例程式碼的詳細內容,更多關於vue 實現頁面內嵌的資料請關注我們其它相關文章!