Spring Boot+Vue Element学习（二）

打开项目

引入

image.png

在Element官网复制粘贴到项目中

Vue 集成 Element UI

Element UI 后台管理系统主要的标签：

el-container：构建整个⻚⾯框架。

el-aside：构建左侧菜单。

el-menu：左侧菜单内容，常⽤属性：

1:default-openeds：默认展开的菜单，通过菜单的 index 值来关联。

image.png

2:default-active：默认选中的菜单，通过菜单的 index 值来关联。

image.png

image.png

el-submenu：可展开的菜单，常⽤属性：

index：菜单的下标，⽂本类型，不能是数值类型。
template：对应 el-submenu 的菜单名。
i：设置菜单图标，通过 class 属性实则。
el-icon-messae
el-icon-menu
el-icon-setting
el-menu-item：菜单的⼦节点，不可再展开，常⽤属性：
index：菜单的下标，⽂本类型，不能是数值类型。

            
            
              
              选项1
              选项2
            
            
              选项3
            
            
              
              选项4-1
            
          

image.png

如果菜单还需要下级菜单

          
            
              选项1
              选项2
              选项3
            
              
                选项4-1
                选项4-2
            
          

image.png

Vue router 来动态构建左侧菜单

导航1
1.⻚⾯1
2.⻚⾯2
导航2
1.⻚⾯3
2.⻚⾯4

在View首先创建页面

image.png

image.png

然后在router文件夹下的index.js配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import PageOne from "../views/PageOne"
import PageTwo from "../views/PageTwo"
import PageThree from "../views/PageThree"
import PageFour from "../views/PageFour"
import App from "../App";
Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: '导航1',
    component: App,
  },
  {
      path:'/pageOne',
      name:'页面1',
      component:PageOne
  },
  {
      path:'/pageTwo',
      name:'页面2',
      component:PageTwo
  },
  {
      path:'/pageThree',
      name:'页面3',
      component:PageThree
  },
  {
      path:'/pageFour',
      name:'页面4',
      component:PageFour
  }
]

测试http://localhost:8080/pageOne

image.png

不是想要的结果怎么办？

image.png

原因因为中间黄色部分的窗口没有开所以需要开窗口。
怎么开窗口？
在App.vue主页面中加

代码如下

image.png

image.png

如何讲页面放到我们想要放的位置？

代码如下

image.png

image.png

菜单动态读取Router中的数据

router下的index.js

const routes = [
  {
    path: '/',
    name: '导航1',
    component: App,
    child:[
      {
        path:'/pageOne',
        name:'页面1',
        component:PageOne
      },
      {
        path:'/pageTwo',
        name:'页面2',
        component:PageTwo
      }
    ]
  },
    {
      path: '/navigation',
      name: '导航2',
      component: App,
      child:[
        {
          path:'/pageThree',
          name:'页面3',
          component:PageThree
        },
        {
          path:'/pageFour',
          name:'页面4',
          component:PageFour
        }
      ]
    }

app.vue怎么动态读取

获取index.js的routes 
$router.options.routes  

image.png

 

   
     













       
         
           
           {{item2.name}}
         
       
     

index代表下标 避免展开收回是冲突 index属性是字符串

image.png

如何把右侧页面只显示页面内容不嵌套导航

新建index.vue 将导航数据存放如下

index.vue

App.vue

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import PageOne from "../views/PageOne"
import PageTwo from "../views/PageTwo"
import PageThree from "../views/PageThree"
import PageFour from "../views/PageFour"
// import App from "../App";
import index from "../views/index"
Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: '导航1',
    component: index,
    children:[
      {
        path:'/pageOne',
        name:'页面1',
        component:PageOne
      },
      {
        path:'/pageTwo',
        name:'页面2',
        component:PageTwo
      }
    ]
  },
    {
      path: '/navigation',
      name: '导航2',
      component: index,
      children:[
        {
          path:'/pageThree',
          name:'页面3',
          component:PageThree
        },
        {
          path:'/pageFour',
          name:'页面4',
          component:PageFour
        }
      ]
    }

]

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

export default router

image.png

menu 与 router 的绑定

1、 标签添加 router 属性。
2、在⻚⾯中添加 标签，它是⼀个容器，动态渲染你选择的 router。
3、 标签的 index 值就是要跳转的 router。

初始化初始页面

redirect:"/pageOne",
默认跳转

path: '/',
    name: '导航1',
    component: index,
    redirect:"/pageOne",
    children:[
      {
        path:'/pageOne',
        name:'页面1',
        component:PageOne
      },

初始化没有被选中导航怎么办？

:class动态加样式

  {{item2.name}}