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