关于vue.js:vue-基于abstract-路由模式-实现页面内嵌

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 的视图。即：

// abstract views
<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,
      required: true,
      default: false,
    },
  },
   // 此处实例化一个新的 router 来配合以后页面的 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>

通过打印日志能够得出两个实例化的路由：

这样即可实现在不扭转以后页面 path 的前提下加载其余路由中的 views 了。

代码示例