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")
                }
            ],
        }
]