vue-router 頁面佈局

在單頁面應用程式（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")
                }
            ],
        }
]