elementui中Menu-Item实现跳转

在ElementUI中，Menu-Item组件可以通过设置to属性来实现页面跳转。具体步骤如下：

1. 在需要使用Menu-Item的组件中引入Menu和MenuItem组件

<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" :to="{path:'/home'}">首页</el-menu-item>
      <el-menu-item index="2" :to="{path:'/about'}">关于我们</el-menu-item>
      <el-menu-item index="3" :to="{path:'/contact'}">联系我们</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { Menu, MenuItem } from 'element-ui'

export default {
  components: {
    'el-menu': Menu,
    'el-menu-item': MenuItem
  },
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index
    }
  }
}
</script>

2. 设置Menu-Item的to属性为一个对象，对象中的path属性为跳转的地址

<el-menu-item index="1" :to="{path:'/home'}">首页</el-menu-item>

3. 在路由配置中添加对应的路由

{
  path: '/home',
  name: 'Home',
  component: Home
},
{
  path: '/about',
  name: 'About',
  component: About
},
{
  path: '/contact',
  name: 'Contact',
  component: Contact
},

这样就可以通过点击Menu-Item来实现页面跳转了。