在单页面应用程序（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")
}
],
}
]