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 })

 

 
 
 
 
posted @ 2019-08-13 10:12  鲜克有终。  阅读(5651)  评论(0)    收藏  举报