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"