element-ui+vue-router:实现导航栏跳转路由

在实际开发中我们常常遇到在单页面中点击导航栏菜单中的某一选项卡，页面中的某个部分出现相关的信息，也就是使用导航栏进行路由跳转。如下图所示（在线格式转换）。

示例

<template>
	<el-container>
  <el-header>
		<div class='sys-title'>后台管理系统</div>
		<div class='header-right'>
			<span>网站首页</span>
			<span>头像</span>
			<span>admin</span>
			<span>退出</span>
		</div>
	</el-header>
  <el-container>
    <el-aside width="200px">
			<el-menu :router='true'
			active-text-color='#ffd04b'>
				<el-submenu index='/admin/users'>
					<template slot='title'>
						<span>个人中心</span>
					</template>
					<el-menu-item index='/admin/users/personal'>个人资料</el-menu-item>
					<el-menu-item index='/admin/users/password'>修改密码</el-menu-item>
				</el-submenu>
				<el-submenu index='/admin/article'>
					<template slot='title'>
						<span>文章管理</span>
					</template>
					<el-menu-item index='/admin/article/add'>发布文章</el-menu-item>
					<el-menu-item index='/admin/article'>文章列表</el-menu-item>
				</el-submenu>
				<el-menu-item index="/admin/comment">
					<template slot='title'>
						<span>评论管理</span>
					</template>
				</el-menu-item>
				<el-menu-item index="/admin/fans">
					<template slot='title'>
						<span>粉丝管理</span>
					</template>
				</el-menu-item>
				<el-menu-item index="/admin/star">
					<template slot='title'>
						<span>点赞管理</span>
					</template>
				</el-menu-item>
			</el-menu>
		</el-aside>
    <el-main>
			<router-view>
			</router-view>
		</el-main>
  </el-container>
</el-container>
</template>

相关的路由为：

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
	{
		path: '/',
		name: 'web',
		component: () => import('@/views/Web')
	},
	{
		path: '/admin',
		name: 'Admin',
		component: () => import('@/views/Home'),
		children: [{
			path: '/admin/users/personal',
			name: 'UserPersonal',
			component: () => import('@/views/User/personal.vue'),
			meta: {
				title: '个人资料'
			}
		},
		{
			path: '/admin/users/password',
			name: 'UserPassword',
			component: () => import('@/views/User/password.vue'),
			meta: {
				title: '修改密码'
			}
		},
		{
			path: '/admin/article',
			name: 'AdminArticle',
			component: () => import('@/views/Article'),
			meta: {
				title: '文章列表'
			}
		},
		{
			path: '/admin/article/add',
			name: 'AddArticle',
			component: () => import('@/views/Article/add.vue'),
			meta: {
				title: '发布文章'
			}
		},
		{
			path: '/admin/article/update',
			name: 'UpdateArticle',
			component: () => import('@/views/Article/update.vue'),
			meta: {
				title: '更新文章'
			}
		},
		{
			path: '/admin/fans',
			name: 'AdminFans',
			component: () => import('@/views/Fans'),
			meta: {
				title: '粉丝管理'
			}
		}	,
		{
			path: '/admin/comment',
			name: 'AdminComment',
			component: () => import('@/views/Comment'),
			meta: {
				title: '评论管理'
			}
		},
		{
			path: '/admin/star',
			name: 'AdminStar',
			component: () => import('@/views/Star'),
			meta: {
				title: '点赞管理'
			}
		}
		],
	},
	{
		path: '/login',
		name: 'Login',
		component: () => import('@/views/Login')
	}
];
const router = new VueRouter({
	mode: "history",
	base: process.env.BASE_URL,
	routes,
});
export default router;

总结

element-ui中的导航栏标签为<el-menu>，可以利用其完成跳转页面功能。

• 在<el-menu>加上:router='true'
• index必须绑定路由的path(原封不动的粘贴过去)
• 要特别关注<el-menu>的属性值设置（特别地其对于导航栏LAVH属性进行设置）