vue3 + element-ui + vue router的使用教程 基于HBuilderX

前言

开发环境基于 HBuilderX

本文主要介绍 element-ui的el-menu组件结合vue router的使用教程

• el-menu组件 ：为网站提供导航功能的菜单；

• vue router： 实现页面的跳转；

1.安装vue router

打开HBuilderX 控制命令行 执行如下代码安装vue router

npm install vue-router@4

2.创建一个router.js文件 封装router

主要目的是封装router ，所有关于router的配置都在该js文件里完成

import { createMemoryHistory, createRouter } from 'vue-router'
//自定义组件
import IndocIssueVue from '../components/IndocIssue.vue'
import OutdocIssueVue from '../components/OutdocIssue.vue'

//路由配置 把URL路径映射到组件
const routes = [
  { path: '/indocissue', component: IndocIssueVue },
  { path: '/outdocissue', component: OutdocIssueVue },
]

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

export default router

3.在main.js中导入router.js

修改main.js 代码如下

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//导入router.js
import router from './common/router.js'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
//使用router
app.use(router)
app.mount('#app')

到此 关于vue router的配置都是完成，
接下来就是在el-menu 组件里使用router 进行页面跳转

4.使用el-menu

在components目录创建 menu.vue 文件 代码如下

<template>
	<el-scrollbar>
		<el-menu class="el-menu-vertical-demo" default-active="1" :default-openeds="['1']"   @select="handleSelect">
			<el-sub-menu index="1">
				<template #title>
					<el-icon><Document /></el-icon>
					<span>出入库单</span>
				</template>
				<el-menu-item-group title="入库单">
					<el-menu-item index="IndocIssue">入库单下发</el-menu-item>
					<el-menu-item index="IndocFeedback">入库单回传</el-menu-item>
				</el-menu-item-group>
				<el-menu-item-group title="出库单">
					<el-menu-item index="OutdocIssue">出库单下发</el-menu-item>
					<el-menu-item index="OutdocFeedback">出库单回传</el-menu-item>
				</el-menu-item-group>
			</el-sub-menu>
			<el-menu-item index="2">
				<el-icon><icon-menu /></el-icon>
				<span>Navigator Two</span>
			</el-menu-item>

			<el-menu-item index="3">
				<el-icon>
					<setting />
				</el-icon>
				<span>日志</span>
			</el-menu-item>
		</el-menu>
	</el-scrollbar>
</template>

<script lang="ts" setup>
	//导入菜单图标
	import {Document, Menu as IconMenu, Setting} from '@element-plus/icons-vue'
	//导入路由
	import router from '../common/router.js'
	
	// const handleOpen = (key : string, keyPath : string[]) => {
	// 	console.log(key, keyPath)
	// }
	// const handleClose = (key : string, keyPath : string[]) => {
	// 	console.log(key, keyPath)
	// }
	
	//跳转方法
	const handleSelect = (key: string, keyPath: string[]) => {
		console.log(key, keyPath)
		router.push(key);
	}
	
</script>

• default-active 属性激活路由
• :default-openeds 默认打开菜单
• el-menu @select 属性： 设置点击菜单的事件回调方法
• el-menu-item index属性： 设置菜单跳转路径

5.在el-menu使用vue router

1.导入路由 代码如下

	//导入路由
	import router from '../common/router.js'

2.添加一个跳转方法

	//跳转方法
	const handleSelect = (key: string, keyPath: string[]) => {
		console.log(key, keyPath)
		router.push(key);
	}

3.设置el-menu的跳转方法

@select="handleSelect"

6.运行项目查看效果如下

项目源码地址 https://gitee.com/hutao409/vue3demo