Vue笔记03 Element UI使用&动态路由导航栏
coconutnut
 2020-03-11 16:16:57      

https://www.bilibili.com/video/av85793766
p2~3

安装

和上次一样创建项目，在vue ui中添加Element UI插件

Idea中导入工程

如果插件在刚才UI中没有装成功，可以在命令行装

使用

Element UI的使用可以看官网手册

Elemnt UI 中文官网

有一些常见的布局方式

导入实例

直接把官网实例复制到App.vue中（html复制到div标签之间）

刷新网页就能看到效果

一些标签说明

el-container: 构建整个⻚面框架

el-menu: 左侧菜单

1
2
// :default-openeds默认展开的菜单 :default-active默认选中的菜单
<el-menu :default-openeds="['1', '3']" :default-active="1-2">

视频里说这个”1-2”必须写成”[1-2]”或则”‘1-2’”才能识别

但是试了一下直接写也识别了

el-submenu: 可展开的菜单

1
2
3
4
// 菜单的下标，文本类型，不能是数值类型
<el-submenu index="1">
  // template:对应 el-submenu 的菜单名 i:设置菜单图标，具体在文档找
	<template slot="title"><i class="el-icon-message"></i>导航一</template>

需要的话还可以嵌套多级submenu

通过vue router动态构建左侧菜单

配置页面

新建4个页面，在router中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Page1 from '../views/Page1'
import Page2 from '../views/Page2'
import Page3 from '../views/Page3'
import Page4 from '../views/Page4'

const routes = [
  {
    path: '/page1',
    name: '页面1',
    component: Page1
  },
  {
    path: '/page2',
    name: '页面2',
    component: Page2
  },
  {
    path: '/page3',
    name: '页面3',
    component: Page3
  },
  {
    path: '/page4',
    name: '页面4',
    component: Page4
  },
]

但是这样还不会显示，要在App.vue中加上router对应的页面

1
2
3
4
5
6
        ...
      </el-container>
    </el-container>
    <router-view></router-view>
  </div>
</template>

此时相当于App中的内容是本来就显示的，下面的view是附加上去的

这样放显然是有问题的

把它放到main里面

1
2
3
4
5
6
7
8
9
10
				...
				<el-main>
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>

  </div>
</template>

这样就放进去了，下一步把它们连上

遍历router

需要修改router的层级结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const routes = [
  {
    path: '/',
    name: '导航1',
    component:App,
    children:[
      {
        path: '/page1',
        name: '页面1',
        component: Page1
      },
      {
        path: '/page2',
        name: '页面2',
        component: Page2
      },
    ]
  },
  {
    path:'/navigation',
    name: '导航2',
    component:App,
    children:[
      {
        path: '/page3',
        name: '页面3',
        component: Page3
      },
      {
        path: '/page4',
        name: '页面4',
        component: Page4
      },
    ]
  },
]

然后在App.vue中读取

1
2
3
4
5
6
7
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
   <el-menu>
       <el-submenu v-for="item in $router.options.routes">
          <template slot="title"><i class="el-icon-setting"></i>{{item.name}}</template>
       </el-submenu>
   </el-menu>
</el-aside>

就显示出来了

一个小bug

页面一开始是空白的，发现是App没有引入，router中要加

1
import App from 'vue-router'

把内层的元素也读出来

现在点一个导航时，两个会一起展开、合上，因为没有加index

再加上index属性（通过item的下标，item在前，index在后），需要字符串属性，拼一个’’

1
2
3
4
5
6
7
8
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
            <template slot="title"><i class="el-icon-setting"></i>{{index}}-{{item.name}}</template>
            <el-menu-item v-for="(item2,index2) in item.children" :index="index+'-'+index2">{{item2.name}}</el-menu-item>
          </el-submenu>
        </el-menu>
</el-aside>

就可以定位到每一个了

把App中的内容放到Index页面中

1、给 el-menu 标签添加 router 属性

2、在⻚面中添加 router-view 标签（它是一个容器，可以动态渲染选择的router）

3、el-menu-item 标签的 index 值就是要跳转的 router

默认页面，在router中写redirect

并初始化选中，如果选择则加is-active状态。用route.path获取当前路径

总结

文件结构

App.vue

1
2
3
4
5
6
<template>
  <div id="app">
<!--    这个router对应的即为/，也就是Index页面-->
    <router-view></router-view>
  </div>
</template>

Index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <el-container style="height: 500px; border: 1px solid #eee">

        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<!--            这里添加router标签，el-menu-item的index就会被作为router路径-->
            <el-menu router :default-openeds="['0','1']">
                <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
                    <template slot="title"><i class="el-icon-setting"></i>{{index}}-{{item.name}}</template>
<!--                    条件判断当前路径是否等于index，更改选中状态，主要是在初始化时增加默认的选中状态-->
                    <el-menu-item v-for="item2 in item.children" :index="item2.path" :class="$route.path==item2.path ? 'is-active' : ''">{{item2.path}}-{{item2.name}}</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-main>
<!--            上面又index确定的router被显示在这里，也就是main区域中-->
            <router-view></router-view>
        </el-main>

    </el-container>
</template>

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const routes = [
  {
    path: '/',
    name: '导航1',
    component:Index,
    redirect:'page1',
    children:[
      {
        path: '/page1',
        name: '页面1',
        component: Page1
      },
      {
        path: '/page2',
        name: '页面2',
        component: Page2
      },
    ]
  },
  {
    path:'/navigation',
    name: '导航2',
    component:Index,
    children:[
      {
        path: '/page3',
        name: '页面3',
        component: Page3
      },
      {
        path: '/page4',
        name: '页面4',
        component: Page4
      },
    ]
  },
]

注意区别：router/route/routes