element-plus导航不跳转的解决办法

最新推荐文章于 2024-06-23 12:43:40 发布

原创最新推荐文章于 2024-06-23 12:43:40 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

在使用Element-Plus的Menu组件时，需要注意各个属性的含义，例如default-active,router等。文章通过示例代码展示了如何创建一个带有子菜单的垂直导航菜单，并强调了在修改el-menu-item的index后，若要实现点击跳转，需在el-menu上设置router属性为true，并确保已配置好路由。同时，文章还提到了事件处理函数handleOpen和handleClose的使用。

element-plus每个组件在使用的时候需要好好看一下各个属性的含义，然后再进行使用

比如我们需要用到Menu下的这个组件

<template>
  <el-row class="tac">
    <el-col :span="12">
      <h5 class="mb-2">Default colors</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-col>
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

在修改对应的el-item的index之后发现点击并没有什么变化，这是因为没有将属性router设置为true
在<el-menu标签中加入router="true"即可实现跳转（当然你得先配置好路由）