vue.js使用 element-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" 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>

 

修改后的代碼

 

<template>
  <div>
    <el-menu :default-active="this.$route.path"
             router
             mode="horizontal"
             class="el-menu-demo">
      <el-menu-item v-for="(item,i) in navList"
                    :key="i"
                    :index="item.name">
        <template slot="title">
          <span> {{ item.navItem }}</span>
        </template>
      </el-menu-item>
    </el-menu>
    <router-view />
  </div>
</template>

 

數據：

 

 data () {
    return {
      navList: [
        { name: '/', navItem: '節目發布' },
        { name: '/Content', navItem: '內容制作' },
        { name: '/Material', navItem: '素材管理' },
        { name: '/SplitScreen', navItem: '分屏模板' },
        { name: '/EmMa', navItem: '設備管理' },
        { name: '/Log', navItem: '日志管理' },
        { name: '/Emergency', navItem: '緊急發布記錄' }
      ]
    }
  }

 

 

 

路由：

 

export default new Router({
  routes: [{
    path: '/',
    name: 'Show',
    component: Show
  },
  {
    path: '/Emma',
    name: 'Emma',
    component: Emma
  },
  {
    path: '/Content',
    name: 'Content',
    component: Content
  },
  {
    path: '/Emergency',
    name: 'Emergency',
    component: Emergency
  },
  {
    path: '/Log',
    name: 'Log',
    component: Log
  },
  {
    path: '/Material',
    name: 'Material',
    component: Material
  },
  {
    path: '/SplitScreen',
    name: 'SplitScreen',
    component: SplitScreen
  }]
})