vue element-ui menu导航

灰太狼 2023-02-13 04:00 43阅读 0赞

## menu组件使用 ##

### html ###

<el-menu
    	 :default-active="activeIndex"
    	  class="el-menu-demo"
    	  mode="horizontal"
    	  @select="handleSelect"
    		background-color="#333"
    		active-text-color="#FF9200"
    		text-color="#FFF"
    		router
    	  >
    	  <el-menu-item v-for="(item,index) in navBar" :key="item.id" :index="item.components">
    			{ { item.value}}
    		</el-menu-item>
    </el-menu>

### js部分 ###

export default { 
    		data(){ 
    			return { 
    				navBar:[
    					{ id:'1',value:"首页" ,components:"Home"},
    					{ id:'2',value:"热门推荐" ,components:"Host"},
    					{ id:'3',value:"精彩影片" ,components:"Speciel"},
    					{ id:'4',value:"动漫" ,components:"Dongm"},
    					{ id:'5',value:"电视剧" ,components:"Tvshow"},
    					{ id:'6',value:"短视频" ,components:"Smarttv"},
    				]
    			}
    		},
    		computed:{ 
    			activeIndex(){ 
    				console.log(this.$route.path.replace('/',''))
    				 return this.$route.path.replace('/','')
    			}
    		},
    		methods:{ 
    			handleSelect(key, keyPath) { 
    				// console.log(key, keyPath);
    			}
    		}
    	}

### router 部分 ###

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import { 
    	Host,
    	Speciel,
    	Smarttv,
    	Dongm,
    	Tvshow
    } from '../views/index.js'
    
    Vue.use(VueRouter)
    
      const routes = [
      { 
        path: '/',
        name: 'Home',
        component: Home,
      },
      { 
    		path: '/host',
    		name: 'Host',
    		component: Host
    	},
    	{ 
    		path: '/speciel',
    		name: 'Speciel',
    		component: Speciel
    	},
    	{ 
    		path: '/smarttv',
    		name: 'Smarttv',
    		component: Smarttv
    	},
    	{ 
    		path: '/dongm',
    		name: 'Dongm',
    		component: Dongm
    	},
    	{ 
    		path: '/tvshow',
    		name: 'Tvshow',
    		component: Tvshow
    	}
    ]
    
    const router = new VueRouter({ 
      routes
    })
    
    export default router

我在使用的时候忘记了el-menu的 router 配置, 导致页面无法实现跳转,

#### router的含义 ####

![在这里插入图片描述][2020052714510767.png]  
只有开启了router模式,才能正确的调用到route中的路由信息

[2020052714510767.png]: https://img-blog.csdnimg.cn/2020052714510767.png