先看效果
步骤详解
- 项目结构设计
使用vue-cli创建新的项目,在src
路径下新建view
目录,用来存放页面;
首页放在index
路径下,添加两个测试页面,test1
和test2
:
- 修改项目启动的默认路由和页面,把项目做成SPA(单页面应用程序)
把导航栏放在项目创建后的起始页,也就是默认页,把vue的hello world
页面作为子页面放在子路由里。具体操作如下: - 把element-ui的导航菜单放到首页(index)中
- 复制官网的导航菜单例子,如下,在这基础上修改成我们想要的样子
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
- 我们先不考虑二级路由,所以删掉
<el-submenu>
- 用
v-for
把导航菜单和路由做成动态可配的,主要文件有首页index.vue
,路由index.js,还有两个测试页面,代码和结构如下:
src\view\index\index.vue:
<template>
<div class="index">
<el-header>
<el-menu
:default-active="this.$route.path"
class="el-menu-demo"
mode="horizontal"
router
@select="handleSelect"
>
<el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
<template slot="title">
<i class="el-icon-s-platform"></i>
<span> {
{
item.navItem }}</span>
</template>
</el-menu-item>
</el-menu>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</div>
</template>
<script>
export default {
data() {
return {
navList: [
{
name: "/", navItem: "首页" },
{
name: "/test1", navItem: "发现项目" },
{
name: "/test2", navItem: "社区动态" },
],
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
},
};
</script>
<style lang="scss" scoped>
.index {
width: 100%;
height: 100%;
}
</style>
需要注意的几个点:
- 要在
el-menu
加上router
这个router是什么?
从element的官方文档我们可以看到,router为是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转。
这就解释了,为什么在el-menu
加上router就可以使用vue的路由跳转。
基于此,我们也需要配置作为path进行路由跳转的index;
- 配置作为path进行路由跳转的index
把导航信息放在navlist中,每个元素的name为子路由,和路由文件index.js中的path保持一致。
default-active
设为当前路由(this.$route.path
),这样在启动时默认页面的menu-item才会高亮。
路由配置如下:
src\router\index.js:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Index from '@/view/index/index.vue'
import test1 from '@/view/test/test1.vue'
import test2 from '@/view/test/test2.vue';
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Index',
component: Index,
children: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/test1',
name: 'test1',
component: test1
}, {
path: '/test2',
name: 'test2',
component: test2
}, ]
}, ]
})
src\view\test\test1.vue 和 src\view\test\test2.vue
test1:
<template>
<div>test1</div>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
</style>
test2:
<template>
<div>test2</div>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
</style>