vue中element-ui配置一二级导航动态渲染并跳转
这次的导航效果,包括二级导航,请认真食用~
先看下效果图吧
具体的步骤如下
1.安装element-ui
npm install element-ui --save
或
cnpm install element-ui --save
2.需要准备页面
如下图结构
修改项目创建后的起始页,也就是默认页=首页,
首页放在上图的index目录下
原先的app.vue中的基本不变:看下图
app.vue
但是
那么刚才说的起始页改变,也就是index目录中的indexView.vue变化,变成SPA(单页面应用),
indexView.vue如下
这里的导航我写成了组件在components里面,如下
headView.vue
<template>
<div class="container">
<el-row class="head">
<el-col class="colCell" :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
<el-menu
:default-active="this.$route.path"
router
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
>
<template v-for="(item, i) of navList">
<el-menu-item v-if="!item.select" :key="i" :index="item.name">
<template slot="title">
<span>{{ item.navItem }}</span>
</template>
</el-menu-item>
<el-submenu v-else :index="item.name" :key="i">
<template slot="title">{{item.navItem}}</template>
<el-menu-item v-for="(items, t) of item.children
" :key="t" :index="items.name">{{items.navItem}}</el-menu-item>
</el-submenu>
</template>
</el-menu>
</el-col>
<el-col class="colCell login"> 登录 </el-col>
</el-row>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
navList: [
{ name: '/', select: false, navItem: '首页' },
{ name: '/test1', select: false, navItem: '发现项目' },
{ name: '/test2', select: false, navItem: '社区动态' },
{
name: '/work1',
navItem: '我的工作台',
select: true,
children: [
{
name: '/work1',
navItem: '工作台1'
},
{
name: '/work2',
navItem: '工作台2'
},
{
name: '/work3',
navItem: '工作台3'
}
]
}
]
}
},
components: {},
created () {
// 初始化
},
mounted () {
// 初始化完成
},
methods: {
// 请编辑事件处理
handleSelect (key, keypath) {
console.log(key, keypath)
}
}
}
</script>
<style lang="scss" scoped>
.container {
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.el-menu-demo {
width: 100%;
display: flex;
justify-content: center;
}
.head {
width: 100%;
height: auto;
display: flex;
}
.login {
flex: 1;
display: flex;
align-items: center;
border-bottom: solid 1px #e6e6e6;
}
</style>
这是导航的代码,data里面的navList可以是接口请求的数据,跟后端协商数据格式就好,通过遍历实现,
还有通过路由来实现,要在
:default-active="this.$route.path"
router
可以看上面完整代码
还有整体的路由的代码,一并贴上
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// import IndexView from '../views/index/indexView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Index',
component: () => import('../views/index/indexView.vue'),
children: [
{
path: '/',
name: 'home',
component: () => import('../components/home/homeView.vue')
},
{
path: '/test1',
name: 'test1',
component: () => import('../views/test/test1View.vue')
},
{
path: '/test2',
name: 'test2',
component: () => import('../views/test/test2View.vue')
}
]
},
{
path: '/',
name: 'Index',
component: () => import('../views/index/indexView.vue'),
children: [
{
path: '/work1',
name: 'work1-1',
component: () => import('../views/work/work1View.vue')
},
{
path: '/work2',
name: 'work1-2',
component: () => import('../views/work/work2View.vue')
},
{
path: '/work3',
name: 'work1-3',
component: () => import('../views/work/work3View.vue')
}
]
}
]
const router = new VueRouter({
routes
})
export default router
路由通过确定首页路由,其他路由通过子路由来实现,方便跟接口数据对应
其他页面代码大体如下:
代码基本就是这样的,需要注意的就是修改默认的起始页,也就是变成了indexView.vue 单页面的方式来实现,通过indexView作为首页,来通过接口和路由的对接来切换其他页面的数据。
还有一个就是路由文件的配置,大致是上面那样配置,时间多的可以去尝试修改完善一下~
后续如有改动会持续更新~~~~
不怕打不死的流氓,就怕耍流氓的流氓