element ui的使用导航栏跳转路由的用法详解

使用elemen-ui的导航栏做路由跳转切换页面
先复制官方的例子

<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" target="_blank">订单管理</a></el-menu-item>
</el-menu>

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

属性

default-active:表示当前active的菜单项的编号
index：类型为字符串，在每一个el-menu-item组件上都有一个编号，给default-active标记

使用菜单栏进行路由跳转

		<el-menu 
		:default-active="activeIndex" // 与当前激活的菜单绑定“path”
		class="el-menu-demo"
		mode="horizontal" 
		:router="true" // 启用router属性
		>
	          <el-menu-item index="/NewReport">新建报表</el-menu-item>
	          <el-menu-item index="/StateStatistics">状况统计</el-menu-									item>
	          <el-menu-item index="/Item">其他</el-menu-item>
	          <el-menu-item index="/Personal">个人管理</el-menu-item>
        </el-menu>

数据

data() {
    return {
      activeIndex: "/NewReport",
    };
  },

方法

methods: {
    handleSelect(routePath) {
      // 路由跳转时，标记在导航的那个选项下对应的路由
      this.activeIndex = this.$route.path
    },
    }，

监听路由的变化

 watch:{
    // 监听路由变化
    '$route.path':{
      handler(routePath){
        this.handleSelect(routePath)
      }
    }
  },