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>

 

修改后的代码

 

 1 <template>
 2   <div>
 3     <el-menu :default-active="this.$route.path"
 4              router
 5              mode="horizontal"
 6              class="el-menu-demo">
 7       <el-menu-item v-for="(item,i) in navList"
 8                     :key="i"
 9                     :index="item.name">
10         <template slot="title">
11           <span> {{ item.navItem }}</span>
12         </template>
13       </el-menu-item>
14     </el-menu>
15     <router-view />
16   </div>
17 </template>

数据：

 

 1  data () {
 2     return {
 3       navList: [
 4         { name: '/', navItem: '节目发布' },
 5         { name: '/Content', navItem: '内容制作' },
 6         { name: '/Material', navItem: '素材管理' },
 7         { name: '/SplitScreen', navItem: '分屏模板' },
 8         { name: '/EmMa', navItem: '设备管理' },
 9         { name: '/Log', navItem: '日志管理' },
10         { name: '/Emergency', navItem: '紧急发布记录' }
11       ]
12     }
13   }

 

 

路由：

 

 1 export default new Router({
 2   routes: [{
 3     path: '/',
 4     name: 'Show',
 5     component: Show
 6   },
 7   {
 8     path: '/Emma',
 9     name: 'Emma',
10     component: Emma
11   },
12   {
13     path: '/Content',
14     name: 'Content',
15     component: Content
16   },
17   {
18     path: '/Emergency',
19     name: 'Emergency',
20     component: Emergency
21   },
22   {
23     path: '/Log',
24     name: 'Log',
25     component: Log
26   },
27   {
28     path: '/Material',
29     name: 'Material',
30     component: Material
31   },
32   {
33     path: '/SplitScreen',
34     name: 'SplitScreen',
35     component: SplitScreen
36   }]
37 })