vue element-ui menu導航

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的含義

只有開啓了router模式,才能正確的調用到route中的路由信息