（十）VUE侧边菜单栏导航–基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建

• 数据库

新手做毕设—后台管理系统

  • 任务九 axios前后端跨域数据交互[https://blog.csdn.net/wdyan297/article/details/128742035?spm=1001.2014.3001.5501](https://blog.csdn.net/wdyan297/article/details/128742035?spm=1001.2014.3001.5501)
  • 任务十 VUE侧边菜单栏导航
    • 一、侧边栏优化为组件Aside
      • 1. 新建Aside .vue组件
      • 2.引入Aside组件
      • 3.使用Aside组件
      • 4. 修改路由
      • 5. 运行项目
    • 二、头部优化为组件Header
      • 1.新建Header .vue组件
      • 2. 引入Header组件
      • 3. 使用Header组件
      • 4. 运行项目
    • 三、页面主体升级为User组件
      • 1.新建user.vue组件
      • 2. Manage.vue中通过使用子路由的方式访问User.vue
      • 3.修改路由index.js文件
      • 4.运行项目
    • 四、侧边栏完善菜单项及超链接
      • 1. 修改Aside组件
      • 2. 运行项目
      • 3. 新增Home.vue组件
      • 4. 修改路由，打开网址直接到需要的页面
      • 5. 运行项目
    • 任务总结

任务九 axios前后端跨域数据交互https://blog.csdn.net/wdyan297/article/details/128742035?spm=1001.2014.3001.5501

任务十 VUE侧边菜单栏导航

任务九 使用axios实现前后端跨域数据交互。并且继续熟悉使用Element UI组件，完成用户数据增删改查。目前我们的前端页面还没有变，仍然沿用最初的home页面，本次任务中我们将进行VUE路由设计，主要对侧边栏进行维护，实现页面导航，然后将home页面改为Manage.vue。把用户管理页面进行组件化设计。通过本次任务，大家能够：

（1）理解并逐步掌握VUE组件的含义；

（2）深入理解VUE单页面应用；

（3）初步掌握VUE路由的概念和使用方法。

一、侧边栏优化为组件Aside

为了与整个项目的完整与合理，将前面的Home.vue文件改名为Manage.vue。

1. 新建Aside .vue组件

在components中新建一个Aside .vue组件，将与 之间的内容全部放到Aside.vue组件中。

特别注意： 这里是将原来的剪切后粘贴到Aside组件中。等一会只需要引用组件就可以了。

Aside .vue组件代码如下：

  
    
    （十）VUE侧边菜单栏导航--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
    后台管理系统
    
    
        导航一
        
        分组一
        选项1
        选项2
        
        
        选项3
        
        
        选项4
        选项4-1
        
    
    
        导航二
        
        分组一
        选项1
        选项2
        
        
        选项3
        
        
        选项4
        选项4-1
        
    
    
        导航三
        
        分组一
        选项1
        选项2
        
        
        选项3
        
        
        选项4
        选项4-1
        
    
  



export default {
  //输出组件
  name: "Aside"
}

特别注意： 注意输出组件。

2.引入Aside组件

在Manage.vue中引入Aside组件。

// @ is an alias to /src
import Aside from '@/components/Aside.vue'

export default {
  name: 'Manage',
  components:{
    Aside
  },
  //  以下中代码不变，略。

在这里插入图片描述

3.使用Aside组件

在Manage.vue中使用组件。

4. 修改路由

因为Home组件的文件名进行了更换，这时候直接运行会报错，因为路由仍然在找原来的页面，所以需要修改路由。

在这里插入图片描述

5. 运行项目

如果项目运行不出数据，特别注意是否前面修改的每个文件都进行了保存。

二、头部优化为组件Header

1.新建Header .vue组件

在components中新建一个Header .vue组件，将与 之间的内容全部放到Header .vue组件中。

注意：为了方便后面传参学习，这里用户名“王小虎”我们采用传参的方式。

    
        {{name}}
        
            个人信息
            退出
        
      


export default {
    name: "Header",
    props: {
    name: String
  }
}

2. 引入Header组件

在Manage.vue中引入Header组件。

// @ is an alias to /src
import Aside from '@/components/Aside.vue'
import Header from '@/components/Header.vue'

export default {
  name: 'Manage',
  components:{
    Aside,
    Header
  },
  以下中代码不变，略。

在这里插入图片描述

3. 使用Header组件

在Manage.vue中使用

组件。

4. 运行项目

在这里插入图片描述

三、页面主体升级为User组件

1.新建user.vue组件

在views中新建一个user.vue组件，将与 之间的内容全部放到User.vue组件中。

注意： 这里需要添加一个因为vue只认一个根

注意 在这里把需要的data、created以及methods全部拷贝到User组件，它们是一起使用的。

2. Manage.vue中通过使用子路由的方式访问User.vue

在Manage.vue中通过使用子路由的方式访问User.vue。因为我们不只是访问一个User页面，还要访问其他的页面（组件），这些组件都是在 标签中显示。

     
        <!--当前页面的子路由将在中展示-->

3.修改路由index.js文件

修改路由index.js文件，将User组件引入，并且作为子路由添加。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Manage from '../views/Manage.vue'
import User from '../views/User.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Manage,  
    children:[
      {
        path: 'user',
        name: 'User',
        component: User
      }
    ]
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在这里插入图片描述

4.运行项目

运行项目，注意路径需要加/user。

在这里插入图片描述

四、侧边栏完善菜单项及超链接

目前我们还没有将菜单与登录用户做对应关系，也就是说还没有做用户权限等内容，我们先安装目前的逻辑关系进行Element菜单栏的一级、二级菜单导航逻辑认识。

1. 修改Aside组件

根据实际情况，修改Aside组件，目前只有一个用户管理页面。

 
    
    （十）VUE侧边菜单栏导航--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
    后台管理系统
    
     
        
            
            主页
        
     
    
        
            
            系统管理
        
        
            
            用户管理

因为只有一个页面，default-openeds=”[]”是默认打开设置，可以根据需要，默认打开某一个一级菜单，只需要填写index值即可。

2. 运行项目

在这里插入图片描述

3. 新增Home.vue组件

新增一个Home.vue组件，暂时作为系统登录后的主页面。

    
        
这是一个主页

    


export default {
    name:"Home"
}

4. 修改路由，打开网址直接到需要的页面

修改路由，利用重定向，使得http://localhost:8081/重定向到http://localhost:8081/home。

const routes = [
  {
    path: '/',
    name: 'Manage',
    redirect: '/home',
    component: Manage,
    children:[
      {
        path: 'user',
        name: 'User',
        component: User
      },
      {
        path: 'home',
        name: 'Home',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
      }
    ]
  }
]

5. 运行项目

注意：如果有运行出来是下图这样的同学们。

在这里插入图片描述

一方面，需要在Manage组件中看你的el-container有没有设置到高度为100%的样式。 app”>

#app{
height: 100%;
}

项目运行就可以正常显示。并且菜单栏根据页面进行路由选择。

在这里插入图片描述

地址栏进行相应显示。

在这里插入图片描述

任务总结

本次任务，主要完成并掌握以下内容：

（1）VUE路由设计，子路由设计；

（2）VUE单页面应用原理；

（3）熟练引用Element的各类组件。

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/2bb52d6566.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐