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

实现效果:使用的是一级菜单(类似Tab栏切换)使用路由进行组件的跳转,这里只有路由跳转的代码,不包含样式
element导航菜单的路由跳转(类似Tab栏切换)_第1张图片
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

你可能感兴趣的:(vue组件基础,elementui)