超详细的vue结合ElementUI实现头部导航栏进行页面跳转

<template>
  <el-menu :default-active="onRoutes" mode="horizontal" @select="handleSelect">
    <el-menu-item index="home">首页</el-menu-item>
    <el-menu-item index="about">关于我们</el-menu-item>
    <el-menu-item index="news">新闻中心</el-menu-item>
    <el-menu-item index="contact">联系我们</el-menu-item>
  </el-menu>
</template>
 
<script>
export default {
  data() {
    return {
      // 当前路由的名称
      onRoutes: this.$route.name
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      // 通过key值进行页面跳转
      this.$router.push({ name: key });
    }
  }
};
</script>

这段代码使用了Vue.js和Element UI库来创建一个水平导航栏，其中每个菜单项都与路由（通过名称）关联。当用户选择一个菜单项时，handleSelect 方法会被调用，该方法使用 Vue Router 的 push 方法来根据选中的菜单项的 key（即路由名称）进行页面跳转。这是一个典型的在Vue应用中使用Element UI库进行导航的例子。