vue.js using element-ui set navigation Skip route

Modify your route according to the official website of the introduction
 
Official website:
<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>
 
The revised Code
 
 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>

 

data:
 
. 1  Data () {
 2      return {
 . 3        navList: [
 . 4          {name: '/', NavItem: 'program release' },
 . 5          {name: '/ the Content', NavItem: 'content creation' },
 . 6          {name: ' / material ', navItem:' material management ' },
 . 7          {name:' / SplitScreen ', NavItem:' Layout template ' },
 . 8          {name:' / EMMA ', NavItem:' equipment management ' },
 . 9          {name : '/ log', navItem: ' log management' },
 10          {name: '/ emergency', NavItem: 'emergency release record' }
11       ]
12     }
13   }

 

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

 

 
 
 
 

Guess you like

Origin www.cnblogs.com/lt1007/p/11344212.html