VUE3-路由《七》

路由就是点击链接或者按钮，进行跳转另一个界面中。在vue中一般使用vue-router来完成路由的操作。

下面我们进行路由的跳转和嵌套路由的实例操作。

1.首先建立一个正常的运行程序

2. 安装vue-router

使用下面的命令，安装路由

npm install vue-router@4

安装完成后，在package.json中可以看到

3.首先我们创建6个vue文件

为了美观，我们安装element-plus，这里不再演示。

<template>
	我是A1界面
	  <el-button type="primary">Primary</el-button>
	      <el-button type="success">Success</el-button>
	      <el-button type="info">Info</el-button>
	      <el-button type="warning">Warning</el-button>
	      <el-button type="danger">Danger</el-button>
</template>

<script>
</script>

<style>
</style>

A2-1

<template>
	我是A2-1界面
</template>

<script>
</script>

<style>
</style>

<template>
	我是A3界面
</template>

<script>
</script>

<style>
</style>

<template>
	我是B界面
</template>

<script>
</script>

<style>
</style>

<template>
	我是C界面
</template>

<script>
</script>

<style>
</style>

DemoMain

<script setup>
</script>

<template>

	<el-container>
		<el-aside style="background-color:#c6e2ff;  ">
			<el-menu :default-openeds="['1']" :unique-opened="true" active-text-color="#ffd04b"
				background-color="#545c64" text-color="#fff">
				<el-sub-menu index="1">
					<template #title>
						<span>A目录</span>
					</template>
					<router-link to="/DemoMain/A1" style="text-decoration: none">
						<el-menu-item index="1-2">A1目录</el-menu-item>
					</router-link>
					<el-sub-menu index="1-3">
						<template #title>A2目录</template>
						<router-link to="/DemoMain/A2-1" style="text-decoration: none">
							<el-menu-item index="1-3-1">A2-1目录</el-menu-item>
						</router-link>
					</el-sub-menu>
					<router-link to="/DemoMain/A3" style="text-decoration: none">
						<el-menu-item index="1-2">A3目录</el-menu-item>
					</router-link>
				</el-sub-menu>
				<router-link to="/DemoMain/B" style="text-decoration: none">
					<el-menu-item index="2">
						B目录
					</el-menu-item>
				</router-link>
				<router-link to="/DemoMain/C" style="text-decoration: none">
					<el-menu-item index="3">
						C目录
					</el-menu-item>
				</router-link>
			</el-menu>
		</el-aside>
		<el-container>
			<el-header style="background-color: #d1edc4; ">Header</el-header>
			<el-main style="background-color:#c8c9cc; ">
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<style scoped>

</style>

其中DemoMain是主界面的代码，也是最关键的。

4.建立一个文件夹store，再建立一个router.js文件，进行路由配置

代码

import {
	createRouter,
	createWebHashHistory
} from 'vue-router'

// 配置路由
const router = createRouter({
	history: createWebHashHistory(),
	routes: [{
			path: '/',
			redirect: '/DemoMain' //初始化默认值 需要配置 和下面配置要一样
		},
		// {
		// 	path: '/DemoMain',
		// 	component: () => import("../components/DemoMain.vue")
		// },
		{
			path: "/DemoMain",
			redirect: '/DemoMain/A1',
			component: () => import("../components/DemoMain.vue"), //初始化默认值 需要配置 和下面配置要一样

			children: [{
					path: 'A1',
					component: () => import("../components/A1.vue")
				},
				{
					path: 'A2-1',
					component: () => import("../components/A2-1.vue")
				},
				{
					path: 'A3',
					component: () => import("../components/A3.vue")
				},
				{
					path: 'B',
					component: () => import("../components/B.vue")
				},
				{
					path: 'C',
					component: () => import("../components/C.vue")
				}
			]
		}
	]

})
// router.beforeEach((to, from, next) => {
// 	//这里对路由的值，进行判断
// 	// if (to.path === '/Login') { // 1.如果访问的是登录页面（无需权限），直接放行 || to.path === '/register'
// 	// 	return next()
// 	// }
// 	// next()
// })
export default router

5.最后修改App.vue文件

<script setup>
</script>

<template>
	<router-view></router-view>
</template>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 0px;
	}
	
	html,
	body,
	#app,
	.el-container {
		/*设置内部填充为0，几个布局元素之间没有间距*/
		padding: 0px;
		/*外部间距也是如此设置*/
		margin: 0px;
		/*统一设置高度为100%*/
		height: 100%;
	}
</style>

6.效果

猜你喜欢