element ui的路由导航

小周在学习！！

于 2022-07-10 11:23:36 发布

阅读量853

点赞数

文章标签： vue elementui 前端 javascript

本文链接：https://blog.csdn.net/qq_45881714/article/details/125703616

版权

我们先从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属性的数字索引