Vue+SpringBoot实践（十）：父子组件以及前端导航栏实现

前言

前面介绍了如何从前端设置路由拦截，本章开始将注重页面的开发，其实就是学习html和CSS之类的知识了

一、路由配置

本次项目我们做的是一个单页面的应用，从设计的角度看，我们应该要有一个父组件，而App.vue是所有组件的父组件，如果直接把导航栏放在父组件上会导致影响到Login.vue的显示，所有我们先建一个主页的父组件。
新建文件夹home，并在文件夹下新建Home.vue文件，写入一个<router-view/>用于显示子组件：

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

<script>
export default {
   
  name: 'Home'
}
</script>

<style scoped>

</style>

接下来建立父子组件的关系，修改router/index.js：

Vue.use(Router)

export default new Router({
   
  mode: 'history',
  routes: [