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
效果:
上面导航,下面页面进行切换