在单页面应用程序（SPA）中，有些页面的布局结构是上下两块是固定，中间内容是变化的。这时在入口处固定上下部分就可以很好的解决这一问题。有少部分页面没有上下部分或不需要（如：用户注册、登陆页面），针对这一情况怎么解决
兼容这两种情况解决方案：
App.vue
在入口处单个路由输出
<template>
<router-view></router-view>
</template>
Frame.vue
在做一个固定结构布局
<template>
<div id="app">
<header class="header">
//.... 头固定
</header>
<div class="main">
<router-view></router-view>
</div>
<footer class="footer">
//.... 尾固定
</footer>
</div>
</template>
router.js
在需要采用固定布局结构的地方加载Frame布局文件，然后做一个嵌套路由。
子路由和父路由相同的情况下可实现默认加载
routes:
[ { path: "/login", name: "login", component: () => import("./views/Login.vue") }, { path: "/register", name: "register", component: () => import("./views/Register.vue") }, { path:"/", component:Frame, children:[ { path:"/", // 默认加载 子路径与父路径相同的情况下会自动加载 name:"index", component: Index }, { path:"/list", name:"list", component: () => import("./views/List.vue") } ], } ]
原文：https://www.cnblogs.com/whnba/p/10740028.html