elementui导航栏页面跳转

element-ui的导航栏可以通过使用el-menu和el-menu-item组件来实现页面的跳转和切换。

首先，导入element-ui库并配置Vue实例的使用：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

然后，在模板中使用el-menu和el-menu-item组件创建导航栏：

<template>
  <div>
    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
      <el-menu-item index="home">首页</el-menu-item>
      <el-menu-item index="about">关于</el-menu-item>
      <el-menu-item index="contact">联系我们</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

接下来，在data中定义activeIndex的值，用于记录当前选中的菜单项的索引：

data() {
  return {
    activeIndex: 'home'
  };
},

然后，在方法中实现handleSelect方法来处理菜单项的点击事件，并进行相应的页面跳转：

methods: {
  handleSelect(index) {
    this.activeIndex = index;
    // 根据index值进行页面跳转
    switch (index) {
      case 'home':
        this.$router.push('/');
        break;
      case 'about':
        this.$router.push('/about');
        break;
      case 'contact':
        this.$router.push('/contact');
        break;
      default:
        break;
    }
  }
}

这样就可以实现通过element-ui的导航栏进行页面的跳转和切换了。