vue-router 页面布局

2019-04-20 08:54:52来源：博客园阅读 ()

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