vue基于abstract路由模式实现页面内嵌的示例代码_vue.js

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

// embedded views

router-drawer 封装

当前项目默认是history 的路由模式，因此在进入abstract页面时，浏览器Url为http://127.0.0.1:8010/abstract-route，而router-drawer要做的是在此基础上，重新实例化一个abstract模式的路由，然后在组件当中利用去挂载要被内嵌的目标页面。即：

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

这样即可实现在不改变当前页面path的前提下加载其他路由中的views了。

代码示例