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

朴灿烈づ我的快乐病毒、 2022-11-01 00:47 851阅读 0赞

# 先看效果 #

![在这里插入图片描述][20210223161753881.gif]

# 步骤详解 #

*  **项目结构设计**

使用vue-cli创建新的项目，在`src`路径下新建`view`目录，用来存放页面；

首页放在`index`路径下，添加两个测试页面，`test1`和`test2`：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]

*  **修改项目启动的默认路由和页面，把项目做成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，还有两个测试页面，代码和结构如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]
 *  `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；

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

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

1.  `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使用导航栏跳转路由用法][element-ui]

[20210223161753881.gif]: /images/20221024/3804a12da2814bfab2ba961ae599618b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: /images/20221024/399f98f3cedd4c709ac2444c1fa56f4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/fae6ffaa16e341c48ed368ca0a5bf1b7.png
[element-ui]: https://blog.csdn.net/AHRL__/article/details/80612481