vue 点击el-submenu跳转

要实现点击 `el-submenu` 跳转的功能，可以在 `el-submenu` 组件上绑定 `click` 事件，然后在事件处理函数中使用 `this.$router.push` 方法进行路由跳转。

例如，假设你的 `el-submenu` 组件的 `index` 属性为 `"1"`，你要跳转到路由 `/example`，那么可以这样写：

<el-menu>
  <el-submenu index="1" @click="handleClick">
    <template slot="title">示例</template>
    <el-menu-item index="1-1">示例1</el-menu-item>
    <el-menu-item index="1-2">示例2</el-menu-item>
  </el-submenu>
</el-menu>

methods: {
  handleClick() {
    this.$router.push('/example')
  }
}

注意，使用 `this.$router.push` 方法进行路由跳转需要在组件中引入 `vue-router`。

相关问题

element-ui 的 el-menu 菜单实现点击 el-submenu 也可以跳转页面

Element UI 的 `el-menu` 组件本身提供了一个简单的导航结构，但默认情况下，当点击 `el-submenu`，它会展开子菜单而不是直接跳转到另一个页面。如果你想要实现点击 `el-submenu` 后跳转页面，你需要自定义一些逻辑。

首先，在 `el-submenu` 的 `index` 或者 `router` 属性上绑定路由信息，假设你正在使用的路由管理库是 Vue Router。你可以这样做：

<template>
  <el-menu :default-active="currentIndex">
    <el-submenu v-for="(item, index) in menuItems" :key="index" :index="item.path || item.index">
      <template slot="title">{{ item.name }}</template>
      <el-menu-item v-for="subItem in item.subItems" :index="subItem.path || subItem.index" @click="goToPage(subItem)">
        {{ subItem.name }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: '',
      menuItems: [
        // ... 你的菜单项数据
      ],
    };
  },
  methods: {
    goToPage(subItem) {
      this.$router.push(subItem.to); // 如果 subItem 中有 to 属性指向路由，例如 { path: '/target' }
    },
  },
};
</script>

在这个例子中，`goToPage` 方法会在点击子菜单项时被触发，通过 `$router.push` 方法将用户导向相应的页面路径。记得在你的路由配置中也要处理这些目标路径。

<template> <el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''"> <template slot="title"> <span>{{ menu.name }}</span> </template> <sub-menu v-for="item in menu.list" :key="item.menuId" :menu="item" :dynamicMenuRoutes="dynamicMenuRoutes" ></sub-menu> </el-submenu> <el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)"> <span>{{ menu.name }}</span> </el-menu-item> </template>

这是一个 Vue.js 的组件模板，使用了 Element UI 的组件库。这个模板定义了一个菜单项（menu）的渲染方式，如果这个菜单项有子菜单（menu.list && menu.list.length >= 1），则渲染成一个下拉菜单（el-submenu），否则渲染成一个普通菜单项（el-menu-item）。如果是下拉菜单，使用了递归的方式来循环渲染子菜单（sub-menu 组件）。这个组件还接收了一个动态路由配置参数（dynamicMenuRoutes），可能是用来动态生成菜单路由的。在点击菜单项时，会触发一个函数（gotoRouteHandle），这个函数会根据菜单项的路由信息来跳转到相应的页面。