element导航菜单的路由跳转（类似Tab栏切换）

实现效果：使用的是一级菜单（类似Tab栏切换）使用路由进行组件的跳转，这里只有路由跳转的代码，不包含样式

HTML结构：router是element导航菜单中的属性，实现路由跳转，再用：index来绑定跳转的路径（记得要拼接一个 ‘/’ ）

<el-container>
  <el-header style="height:35px">
    <el-menu class="el-menu-demo"
             mode="horizontal"
             active-text-color='#39f'
             router>
      <el-menu-item :index="'/' + item.path"
                    v-for="item in menulist"
                    :key="item.id">{
   
   {item.authName}}</el-menu-item>
    </el-menu>
  </el-header>
  <el-main>
    <router-view></router-view>
  </el-main>
</el-container>

这是我写的菜单假数据

<script>
export default {
    
    
  data () {
    
    
    return {
    
    
      menulist: [
        {
    
     id: 1, authName: '统计总览', path: 'detector-stat/stat-overview' },
        {
    
     id: 2, authName: '终端报表统计', path: 'detector-stat/stat-detectorview' }
      ]
    }
  }

}
</script>

router在路由配置文件中：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import StatOverview from '../components/detector-stat/stat-overview.vue'
import StatDetectorview from '../components/detector-stat/stat-detectorview.vue'

Vue.use(VueRouter)

// const routes = [
// ]

const router = new VueRouter({
    
    
    routes: [
        {
    
     path: '/', redirect: '/login' },
        {
    
     path: '/login', component: Login },
        {
    
    
            path: '/home',
            component: Home,
            children: [
                {
    
     path: '/detector-stat/stat-overview', component: StatOverview },
                {
    
     path: '/detector-stat/stat-detectorview', component: StatDetectorview }
            ]
        }
    ]
})

export default router