element ui的路由导航_el-menu-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45881714/article/details/125703616

这篇博客详细介绍了如何在Vue项目中结合Element UI进行路由导航的实践操作，包括复制并定制导航组件，将数字索引替换为路径索引，以及在index.js中配置路由的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们先从element中复制一份导航组件，并去掉一些不要的标签，如下

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item> 
  <el-menu-item index="2">列表</el-menu-item> 
  <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>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

现在我们开始修改：

主要把 index属性的数字索引变成路径索引

 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="/index">首页</el-menu-item>
          <el-menu-item index="/user">用户管理</el-menu-item>
          <el-menu-item index="/msg">消息中心</el-menu-item>
          <el-menu-item index="/order">订单管理</el-menu-item>
        </el-menu>

<script>

export default {
   data() {
      return {
        //activeIndex:this.$route.path,  //刷新之后，还在当前路径页面
      
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        this.$router.push(key)
      }
    }
  
    
  }
</script>

index.js路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '@/components/Index.vue'
import List from '@/components/user/List.vue'

Vue.use(VueRouter)

const routes = [
  {path:'/',redirect:'/index'},
  {path: '/index',component: Index},
  {path: '/user',component: List},
  
  
]

const router = new VueRouter({
  routes
})

export default router