这次的导航效果，包括二级导航，请认真食用~
先看下效果图吧
image.png
具体的步骤如下
1.安装element-ui
npm install element-ui --save
或
cnpm install element-ui --save
2.需要准备页面
如下图结构
image.png
修改项目创建后的起始页，也就是默认页=首页，
首页放在上图的index目录下
原先的app.vue中的基本不变：看下图
app.vue
image.png
但是<router-view />还是需要的，这是承接路由的节点
那么刚才说的起始页改变，也就是index目录中的indexView.vue变化，变成SPA(单页面应用)，
indexView.vue如下
image.png
这里的导航我写成了组件在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可以是接口请求的数据，跟后端协商数据格式就好，通过遍历实现,
还有通过路由来实现，要在<el-menu>里面写上
: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
路由通过确定首页路由，其他路由通过子路由来实现，方便跟接口数据对应
其他页面代码大体如下：
image.png
image.png
代码基本就是这样的，需要注意的就是修改默认的起始页，也就是变成了indexView.vue 单页面的方式来实现，通过indexView作为首页，来通过接口和路由的对接来切换其他页面的数据。
还有一个就是路由文件的配置，大致是上面那样配置，时间多的可以去尝试修改完善一下~
后续如有改动会持续更新~~~~
