Vue + Spring Boot 项目实战（七）：导航栏与图书页面设计（学习笔记07）

一、导航栏的实现

这个导航栏的要求很简单：

1. 能够在每个页面显示
2. 美观

1.路由配置

为了实现第一个要求，我们需要把导航栏放在其它页面的父页面中（对 Vue 来说就是父组件），之前我们讲过，App.vue 是所有组件的父组件，但把导航栏放进去不合适，因为我们的登录页面中不应该显示导航栏。

为了解决这个问题，我们在 components 目录下直接新建一个组件，命名为 Home.vue，原始代码如下：

打开 router/index.js ，修改代码如下

2.使用 NavMenu 组件

我们在 components 文件夹里新建一个 common 文件夹，用来存储公共的组件，并在该文件夹新建一个组件 NavMenu.vue，经过我修改的代码如下：

 

二、图书管理页面

 

1. 图书展示区域
2. 分类导航栏
3. 搜索栏
4. 页码

1.LibraryIndex.vue

2.SideMenu.vue

编写一个侧边栏组件。放在 /library 文件夹中，代码如下

在 LibraryIndex.vue 中使用这个组件

3.Books.vue

最后把 Books 组件放在 LibraryIndex.vue 中，并稍微修改一下样式