侧边栏可以拿后台接口数据,也可以自己编写。这里我是自己编写所需侧边栏信息
应用到element中的el-menu、el-submenu、el-menu-item
布局
<el-aside>
<el-menu
default-active="activePath" // 当前激活菜单的 index
background-color="#323744 " //导航栏背景颜色
:collapse-transition="false" //是否开启折叠动画
unique-opened //是否只保持一个子菜单的展开
text-color="#fff" //文字颜色
active-text-color="#aaa" //文字被激活后的颜色
:router="true" //是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转
>
<el-submenu
:index="item.id" //唯一标志
v-for="item in navMenuList" //循环遍历
:key="item.id">
<template slot="title">
<i class="el-icon-location"></i> //图标
<span>{{item.authName}}</span> //导航选项名称
</template>
<el-menu-item
v-for="item1 in item.children" //循环遍历
:key="item1.id"
:index="'/'+item1.path" //绑定的唯一标志
@click="saveNavItem( '/' + item1.path)"> //点击事件
<template>
<i class="el-icon-menu"></i>
<span>{{item1.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</aside>
<!-- 右侧内容区域 -->
<el-main>
//main中放router-view 展示对应路由组件的页面
<router-view></router-view>
</el-main>
实现路由导航(点击导航项跳转至对应导航项页面)
一、在home页面(包含导航栏的页面)
将menu导航栏中添加router属性和default-active属性,给router设置为true,当点击某导航项的时候,触发方法。给default-active拼接路由地址包含‘/’
方法:
// 保存链接的激活状态
saveNavItem(activePath) {
// 把index值保存到window中
window.sessionStorage.setItem('activePath',activePath)
}
二、在index.js页面设置路由
//先导入对应的页面组件(该页面组件是已经创建完成的,若没创建的话需要创建好)
import Agency from '../components/Agency1.vue'
Vue.use(VueRouter)
const routes = [{
path:'/home',
name:'Home',
component: Home,
/这部分数组存放home页面的子组件
children:[
//这部分path必须对应导航想的activePath地址
{ path: '/agency', component:Agency}
]
}
]
在这两个页面中 即可完成路由导航
如果用的是接口,那在home页面中,需要有获取导航列表的方法