主体布局搭建
我们在 Container 布局容器，找到有左侧、头部、和主体部分的布局，直接复制代码到 Main.vue 中：
<template>
<div>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
</div>
</template>
左侧菜单搭建
在导航菜单中找到我们需要的直接复制示例代码到项目中即可
我们在 components 中新建 CommonAside.vue ，做为左侧菜单的组件，把复制的代码放进去
<template>
<div class="hello">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
isCollapse: true
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
然后在 Main.vue 中引入组件
<template>
<div>
<el-container>
<el-aside width="200px">
<CommonAside />
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import CommonAside from "@/components/CommonAside";
export default {
name: "Main",
components:{
CommonAside
}
}
</script>
<style scoped>
</style>
运行项目现在的样式：
我们修改默认代码，使用 for 循环动态渲染成我们所需要的导航数据：
<template>
<div class="hello">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item v-for="item in noChildren" :key="item.name" :index="item.name">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{item.label}}</span>
</el-menu-item>
<el-submenu v-for="item in hasChildren" :key="item.name" :index="item.name">
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span>{{item.label}}</span>
</template>
<el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
<el-menu-item :index="subItem.name">{{subItem.label}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
isCollapse: true,
menuData: [
{
path: '/',
name: 'home',
label: '首页',
icon: 's-home',
url: 'Home/home'
},
{
path: '/mall',
name: 'mall',
label: '商品管理',
icon: 'video-play',
url: 'MallManage/MallManager'
},
{
path: '/user',
name: 'user',
label: '用户管理',
icon: 'user',
url: 'UserManage/UserManager'
},
{
label: '其他',
icon: 'location',
name: 'other',
children:[
{
path: '/page1',
name: 'page1',
label: '页面1',
icon: 'setting',
url: 'Other/PageOne'
},
{
path: '/page2',
name: 'page2',
label: '页面2',
icon: 'setting',
url: 'Other/PageTwo'
}
]
},
]
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
},
computed:{
// 没有子菜单
noChildren(){
return this.menuData.filter(item => !item.children)
},
// 有子菜单
hasChildren(){
return this.menuData.filter(item => item.children)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
运行程序：
对代码进行分析：我们使用计算属性分为有子菜单和没有子菜单的两部分，然后分别遍历
我们用到了图标：Icon，使用方法就是在 <i> 中使用对应 class 即可，我们观察到图标的前边都是一样的，所以我们使用 ES6的模板语法，只改变后边的名称即可
由于我们需要修改左侧菜单的样式，我们可以使用 less（less官方文档），我们需要先下载安装执行npm i less@4.1.2
还需要安装npm i less-loader@6.0.0
之后修改 CommonAside.vue 中代码，增加一个标题，然后修改样式如下：
<template>
<div class="hello">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<h3>通用后台管理</h3>
......
</el-menu>
</div>
</template>
<script>
......
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
.el-menu{
height: 100vh;
h3{
color: #fff;
text-align: center;
line-height: 48px;
font-size: 16px;
font-weight: 400;
}
}
</style>
现在样式是这样的，左边有默认的边距，所以需要修改 App.vue 去掉边距
<template>
<div id="app">
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
</script>
<style lang="less">
html,body,h3{
margin: 0;
padding: 0;
}
</style>
运行效果如下：
左侧菜单跳转
在 CommonAside 中我们的菜单数据中已经有了跳转路径，我们需要加到 index.js 中
这里的 path 就复制 CommonAside 中对应菜单的 path 即可
import Vue from 'vue'
......
//1、创建组件
import Home from '../views/Home';
import User from '../views/User';
import Main from '../views/Main';
import Mall from '../views/Mall';
import PageOne from '../views/PageOne';
import PageTwo from '../views/PageTwo';
//2、将路由与组件进行映射
const routes = [
{
//主路由
path: '/',
component: Main,
children: [
{ path: 'home', component: Home },// 主页
{ path: 'user', component: User },// 用户管理
{ path: 'mall', component: Mall },// 商品管理
{ path: 'page1', component: PageOne },// 页面1
{ path: 'page2', component: PageTwo },// 页面2
]
}
]
//3、创建router实例
......
这样当我们在浏览器地址栏修改地址时，页面就会展示对应的页面了
下面完成点击左侧菜单进行跳转，所以需要给菜单添加 click 事件，传入点击的菜单的数据，使用 router 进行跳转
<template>
<div class="hello">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<h3>通用后台管理</h3>
<el-menu-item v-for="item in noChildren" :key="item.name" :index="item.name" @click="menuClick(item)">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{item.label}}</span>
</el-menu-item>
<el-submenu v-for="item in hasChildren" :key="item.name" :index="item.name">
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span>{{item.label}}</span>
</template>
<el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
<el-menu-item :index="subItem.name">{{subItem.label}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
......
methods: {
......
menuClick(item) {
this.$router.push(item.path)
}
},
......
}
</script>
index.js 中需要增加redirect:'/home'，这样当以为首页的路径是 /，当点击时需要重定向到 home 页面
const routes = [
{
//主路由
path: '/',
component: Main,
redirect:'/home',
children: [
{ path: 'home', component: Home },// 主页
{ path: 'user', component: User },// 用户管理
{ path: 'mall', component: Mall },// 商品管理
{ path: 'page1', component: PageOne },// 页面1
{ path: 'page2', component: PageTwo },// 页面2
]
}
]
然后我们解决一个问题，当我们已经点击了商品管理时，当再次点击一次商品管理时会报错，这是因为 router 限制了我们不能重复跳转，如果重复跳转就会有这个提示
所以我们需要在跳转时进行判断，如果需要跳转的路径和当前路径相同就不进行跳转
menuClick(item) {
// 当页面的路由与跳转的路由不一致才进行跳转
if(this.$route.path !== item.path && !(this.$route.path === '/home' && item.path === '/')){
this.$router.push(item.path)
}
}
1923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
