Vue+Spring-Boot项目实战：导航栏与图书页面设计.docx

? ? Vue + Spring Boot 项目实战 导航栏与图书页面设计 ? ? 本篇目录 前言 一、导航栏的实现 1.路由配置 2.使用 NavMenu 组件 二、图书管理页面 1.LibraryIndex.vue 2.SideMenu.vue 3.Books.vue 前言 之前讲过使用 Element 辅助前端页面的开发，但是只用到了比较少的内容，这一篇我们来做一下系统的核心页面——图书管理页面的前端部分，旨在熟悉 Vue 的更多特性。 一、导航栏的实现 我们的项目虽然本质上是单页面应用，但表面上有多个功能页面，比如首页、图书馆、笔记本等，后期根据情况还可以把一些功能集中起来做一个后台管理页面。为了方便用户在这三个页面之间切换，我们需要添加一个导航栏。 这个导航栏的要求很简单： 能够在每个页面显示 美观 1.路由配置 为了实现第一个要求，我们需要把导航栏放在其它页面的父页面中（对 Vue 来说就是父组件），之前我们讲过，App.vue 是所有组件的父组件，但把导航栏放进去不合适，因为我们的登录页面中不应该显示导航栏。 为了解决这个问题，我们在 components 目录下直接新建一个组件，命名为 Home.vue，原始代码如下： template div router-view/ /div /template script export default { name: Home } /script style scoped /style 这里和 App.vue 一样，写入了一个 router-view/，也就是子页面（组件）显示的地方。 接下来，来建立路由的父子关系。注意我们在一个组件中通过导入引用了其它组件，也可以称之为父子组件，但想要通过 router-view/ 控制子组件的显示，则需要进行路由的相关配置。 打开 router/index.js ，修改代码如下 import Vue from vue import Router from vue-router import AppIndex from ../components/home/AppIndex import Login from ../components/Login import Home from ../components/Home Vue.use(Router) export default new Router({ mode: history, routes: [ { path: /home, name: Home, component: Home, // home页面并不需要被访问 redirect: /index, children: [ { path: /index, name: AppIndex, component: AppIndex, meta: { requireAuth: true } } ] }, { path: /login, name: Login, component: Login } ] }) 注意我们并没有把首页的访问路径设置为 /home/index，仍然可以通过 /index 访问首页，这样配置其实是感受不到 /home 这个路径的存在的。之后再添加新的页面，可以直接在 children 中增添对应的内容。 2.使用 NavMenu 组件 打开 Element 的文档，找到 NavMenu 组件相关内容： /2.0/#/zh-CN/component/menu 主要有顶栏、侧栏两种导航样式，我们选择顶栏型，点击显示代码这个顶栏其实有两个，上面的是没有底色的，下面的是有底色的。这些代码基本涵盖了各种用法，我们可以选择自己需要的部分，并根据下面的文档对它进行改造。 我们在 components 文件夹里新建一个 common 文件夹，用来存储公共的组件，并在该文件夹新建一个组件 NavMenu.vue，经过我修改的代码如下： template el-menu :default-active=/index router mode=horizontal background-color=white text-color=#222 active-text-color=red