课程名称： SpringBoot+Vue3 项目实战，打造企业级在线办公系统
课程章节： 第2章 构建后端项目，运行分布式项目（万丈高楼平地起）,第三章 基于RBAC，实现用户模块（大鹏一日同风起，扶摇直上九万里）
主讲老师： 神思者

课程内容

今天主要学习的内容有：

• 学习了前端Vue项目的基本布局。并且通过课程去了解了有关Vue的路由规则

学习收获

前端Vue的布局

Vue是目前最流行的MVVM前端框架。可以通过在html文件里面直接引入vue.js去使用vue的特性。但是在企业级项目当中，几乎都是通过脚手架搭建的前端项目。他有一个完整的工程目录。

在课程当中采用的就是通过脚手架搭建好的一个前端Vue项目。
下图为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"
    }
]

二、子路由

在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，就是让main.vue的子路由加载home.vue页面。浏览器访问http://127.0.0.1:3000/#/role，main.vue主面板区加载的是role.vue页面。

课程截图