2-6 前端页面布局设计_企业级在线办公系统-慕课网

对于大多数Java程序员来说，看前端项目排版布局的代码太复杂了，那么本项目的前端页面排版布局有没有通用的整体规划呢？本小节咱们来了解一下前端项目的排版布局。

图片描述
因为本项目采用了嵌套路由技术，所以大家要先搞清楚父子两层路由都分别是怎么引用Vue页面的。

一、父路由

图片描述
父路由引用Vue页面是在src/App.vue页面中设置的。可以说上图所有内容都是通过<router-view>引用到App.vue页面里面的。

<template>
    <router-view />
</template>

在router/index.js文件中，我为父路由设置了若干页面。具体对应关系可以参考表格。

const routes = [
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/',
        name: 'Main',
        component: Main,
        children: [
            //若干子路由页面
        ]
    },
    {
        path: "/404",
        name: "NotFound",
        component: NotFound
    },
    {
        path: '/:pathMatch(.*)*',
        redirect: "/404"
    }
]

序号	路径	对应页面	页面别名
1	/login	login.vue	Login
2	/	main.vue	Main
3	/404	404.vue	NotFound
4	非注册路径，统一跳转到404页面

二、子路由

在main.vue页面中主要分为三个区域，导航区和菜单区都是定义在main.vue页面中的。主面板区域的内容是通过路由标签引入的其他Vue页面。

<el-card v-else :body-style="siteContentViewHeight">
    <!-- 子路由标签 -->
    <router-view />
</el-card>

在router/index.js文件中，我配置main.vue页面的时候，为这个页面设置了子路由路径。也就是说，这些子路由页面都可以被main.vue页面引用到主面板区。

{
    path: '/',
    name: 'Main',
    component: Main,
    children: [
        {
            path: '/home',
            name: 'Home',
            component: Home,
            meta: {
                title: '首页',
            }
        },
        {
            path: "/role",
            name: "Role",
            component: Role,
            meta: {
                title: "角色管理",
                isTab: true
            }
        },	
        ……
    ]
}

我们在浏览器上面访问[http://127.0.0.1:3000/#/home](http://127.0.0.1:3000/#/home)，就是让main.vue的子路由加载home.vue页面。浏览器访问[http://127.0.0.1:3000/#/role](http://127.0.0.1:3000/#/role)，main.vue主面板区加载的是role.vue页面。

图片描述
大家也许注意到了，有的子路由页面配置信息中含有isTab: true属性，这个属性表示主面板区域引用Vue页面的时候直接引用，还是以选项卡引用。所有的子路由页面，只有home.vue页面是直接引用的，其他页面都是以选项卡引入的。
图片描述