element-ui使用导航菜单 跳转路由 的方法详解

先看效果

步骤详解

• 项目结构设计

使用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>

需要注意的几个点：

1. 要在el-menu加上router

这个router是什么?

从element的官方文档我们可以看到，router为是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转。

这就解释了，为什么在el-menu加上router就可以使用vue的路由跳转。

基于此，我们也需要配置作为path进行路由跳转的index；

2. 配置作为path进行路由跳转的index

把导航信息放在navlist中，每个元素的name为子路由，和路由文件index.js中的path保持一致。

3. 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>

结尾

我是圆圆，如果我的文章对你的学习成长有所帮助，欢迎 点 赞 👍 支持，您的 点 赞 👍 支持是我进行创作和分享的动力！

如果有问题可以留言评论或者私信我，我都会一一解答~笔芯🤞

参考

• element-ui使用导航栏跳转路由用法