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

2021/10/18 23:16:44

本文主要是介绍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



这篇关于Vue + Spring Boot 项目实战(五)笔记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程