element顶部导航

1.html 

<el-menu
  :default-active="$route.path"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#fff"
  text-color="#909399"
  active-text-color="#409EFF"
  router>
  <el-menu-item index="/dashboard">首页</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作</template>
    <el-menu-item index="/HeaderMain">选项一</el-menu-item>
    <el-menu-item index="/HeaderTop">选项2</el-menu-item>
  </el-submenu>
</el-menu>

methods: {
  handleSelect(key, keyPath) {
    console.log(key, keyPath)
  }
}

 

 

3./router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* 布局Layout */
const Layout = r => require.ensure([], () => r(require('@/layout/index.vue')), 'Layout')
const dashboard = r => require.ensure([], () => r(require('@/views/dashboard/index.vue')), 'dashboard')
const login = r => require.ensure([], () => r(require('@/views/login/index.vue')), 'login')
const error = r => require.ensure([], () => r(require('@/views/404.vue')), 'error')
const HeaderMain = r => require.ensure([], () => r(require('@/views/dashboard/item/HeaderMain.vue')), 'HeaderMain')
const HeaderTop = r => require.ensure([], () => r(require('@/views/dashboard/item/HeaderTop.vue')), 'HeaderTop')

export const constantRoutes = [
  /* 页面 */
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'dashboard',
      component: dashboard,
      meta: { title: '首页', icon: 'dashboard' }
    },{
      path: '/HeaderMain',
      name: 'HeaderMain',
      component: HeaderMain,
      meta: { title: 'HeaderMain', icon: '' }
    }, {
      path: '/HeaderTop',
      name: 'HeaderTop',
      component: HeaderTop,
      meta: { title: 'HeaderTop', icon: '' }
    }]
  },
  /* 登录 */
  {
    path: '/login',
    component: login,
    meta: { title: '用户登录', icon: 'dashboard' },
    hidden: true
  },
  /* 报错页面404 */
  {
    path: '/404',
    component: error,
    meta: { title: '404' },
    hidden: true
  }
]

const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  base: '/bw/',
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

效果：

上面导航，下面页面进行切换