Vue + Spring Boot 项目实战（五）笔记

导航栏与图书页面设计

没太多可说的，都是element-ui的基本用法，

导航栏实现

导航栏是通过vue-router的嵌套路由实现的，如果只是写在App.vue中也可以，但是这样接下来访问的所有组件都会有NavMenu，很明显Login组件是不需要的，所以可以创建一个父组件，在里面写NavMenu：

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

接着在router/index.js中配置路由：

routes:[
        {
            path:'/home',
            name:'Home',
            component:Home,
            redirect:'/index',
            children:[
                {
                    path:'/index',
                    name:'AppIndex',
                    component:AppIndex,
                    meta:{
                        requireAuth:true
                    }
                },
                {
                    path:'/library',
                    name:'Library',
                    component:LibraryIndex,
                    meta:{
                        requireAuth: true
                    }
                }
            ]
        },

可以看到index和library是作为Home的子组件，当vue-router匹配到/index或/library时，就会在Home组件中渲染

具体参考：https://router.vuejs.org/zh/guide/essentials/nested-routes.html