Element UI左侧导航栏路由跳转实现~

1、首先在Element UI的导航菜单中有个router属性，开启这个属性会在激活导航时以 index 作为 path 进行路由跳转，因此我们一般会将导航栏的index动态设置成‘/user’这种形式，以此来实现路由跳转。

//子组件
<template>
  <div>
    <div v-for="(item, index) in leftMenus" :key="index">
      <!-- 多级导航 -->
       <!-- 这里设置动态key值，解决高亮问题,也可实现路由跳转 ,并通过设置v-if来判断数据有无二级菜单数据，以此来展示二级菜单-->
      <el-submenu :index="item.key" v-if="item.children">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ item.title }}</span>
        </template>
        <!-- 这里使用递归组件,用来遍历多级菜单，将children数据传给递归组件,自己遍历自己 -->
         <nav-menu :leftMenus="item.children"></nav-menu>
      </el-submenu>
      <!-- 一级导航 -->
      <el-menu-item :index="item.key" v-else>
        <i class="el-icon-menu"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </div>
  </div>
</template>

<script>

export default {
    // 注意使用递归组件，name值就要改变了
  name: "NavMenu",
  data() {
    return {};
  },
  props:['leftMenus'],
  methods: {},
};
</script>

<style></style>

//父组件
<template>
  <div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="rgb(60, 60, 60)"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <Aside_demo :leftMenus="leftMenus"></Aside_demo>
    </el-menu>
  </div>
</template>

 

import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

const router = new VueRouter({
    routes:[{
        path:'/',
        redirect:'/login',
    },
    {
        path:'/home',
        name:'home',
        component:()=>import('../src/view/showIndex.vue'),
        children:[{
            path:'/user',
            name:'user',
            component:()=>import('../src/view/user.vue'),
        }]
    },
    {
        path:'/login',
        name:'login',
        component:()=>import('../src/view/loginNews.vue')
    },
]
})


export default router