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

最新推荐文章于 2024-08-12 11:44:39 发布

_he_dan_

最新推荐文章于 2024-08-12 11:44:39 发布

阅读量1.5w

点赞数 20

分类专栏： vue 文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/nahedan/article/details/120984729

版权

本文介绍了在Vue.js项目中结合Element-UI和Vue-Router，如何实现在导航栏中点击菜单选项卡触发页面路由跳转。通过示例详细解析了相关路由配置，并强调了在element-ui的导航栏组件中设置`index`属性与Vue-Router的`path`对应的重要性，以及对导航栏的LAVH属性进行定制的方法。

摘要由CSDN通过智能技术生成

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

示例

<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>
				<