Vue + Spring Boot 项目实战(五)笔记

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

上一篇:三、流程控制_2.循环结构


下一篇:Openssl在LINUX环境下初始化异常