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