课程名称: SpringBoot+Vue3 项目实战,打造企业级在线办公系统
课程章节: 第2章 构建后端项目,运行分布式项目(万丈高楼平地起),第三章 基于RBAC,实现用户模块(大鹏一日同风起,扶摇直上九万里)
主讲老师: 神思者
今天主要学习的内容有:
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
页面。