element-ui使用导航栏跳转路由的用法详解-创新互联

最近初学vue，试着做一个小项目熟悉语法与思想，其中使用elemen-ui的导航栏做路由跳转切换页面。下面记录一下学习过程

成都创新互联拥有十余年成都网站建设工作经验,为各大企业提供成都做网站、成都网站设计服务，对于网页设计、PC网站建设（电脑版网站建设）、App定制开发、wap网站建设（手机版网站建设）、程序开发、网站优化（SEO优化）、微网站、主机域名等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验，集策划、开发、设计、营销、管理等网站化运作于一体，具备承接各种规模类型的网站建设项目的能力。

element-ui引入vue项目的用法参考element官网

首先复制官网的例子，在这基础上再修改成我们想要的样子。

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
 <el-menu-item index="1">处理中心</el-menu-item>
 <el-submenu index="2">
 <template slot="title">我的工作台</template>
 <el-menu-item index="2-1">选项1</el-menu-item>
 <el-menu-item index="2-2">选项2</el-menu-item>
 <el-menu-item index="2-3">选项3</el-menu-item>
 <el-submenu index="2-4">
  <template slot="title">选项4</template>
  <el-menu-item index="2-4-1">选项1</el-menu-item>
  <el-menu-item index="2-4-2">选项2</el-menu-item>
  <el-menu-item index="2-4-3">选项3</el-menu-item>
 </el-submenu>
 </el-submenu>
 <el-menu-item index="3" disabled>消息中心</el-menu-item>
 <el-menu-item index="4"><a href="https://www.ele.me" rel="external nofollow" target="_blank">订单管理</a></el-menu-item>
</el-menu>

<script>
 export default {
 data() {
  return {
  activeIndex: '1'
  };
 },
 methods: {
  handleSelect(key, keyPath) {
  console.log(key, keyPath);
  }
 }
 }
</script>