前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
腾讯云架构师技术同盟
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP腾讯云架构师技术同盟
返回腾讯云官网
社区首页 >专栏 >【SpringBoot+Vue】008-Main区重定向、路径记忆

【SpringBoot+Vue】008-Main区重定向、路径记忆

作者头像
訾博ZiBo
发布于 2025-01-06 16:11:44
发布于 2025-01-06 16:11:44
8000
代码可运行
举报
文章被收录于专栏：全栈开发工程师全栈开发工程师
运行总次数：0
代码可运行

一、Main区重定向

1、在Main区添加路由标签

代码语言：javascript
代码运行次数：0
复制
<template>
	<!-- 引入布局 -->
	<el-container class="home-container">
		<!-- 头部 -->
		<el-header>
			<div>
				<img class="logo" src="../assets/logo.png" />
			</div>
			<span class="title">个人运动平台</span>
			<el-button class="info" @click="logout()"> 安全退出！ </el-button>
		</el-header>
		<!-- 主体 -->
		<el-container>
			<!-- 侧边栏 -->
			<el-aside :width="isCollapse?'64px':'200px'">
				<div class="toggle-button" @click="toggleCollapase">|||</div>
				<el-menu class="el-menu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened
				 :collapse="isCollapse" :collapse-transition="false">
					<!-- 当一个模块展开的时候关闭其他模块 -->
					<!-- <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened> -->
					<!-- index要唯一，就不会造成问题出现了 -->
					<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
						<template slot="title">
							<i :class="iconsObject[item.id]"></i>
							<span>{{item.title}}</span>
						</template>
						<!-- index要唯一，就不会造成问题出现了 -->
						<el-menu-item :index="it.id+''" v-for="it in item.subMenuList" :key="it.id">
							<i :class="iconsObject[it.id]"></i>
							<span>{{it.title}}</span>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<!-- 主体 -->
			<el-main>
				<!-- 路由 -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				//菜单列表
				menuList: [],
				isCollapse: false,
				iconsObject: {
					'100': 'iconfont icon-guanliyuan',
					'200': 'iconfont icon-yundong',
					'101': 'iconfont icon-denglu',
					'102': 'iconfont icon-mima',
					'103': 'iconfont icon-yundong',
					'104': 'iconfont icon-shangpin',
					'201': 'iconfont icon-shu',
					'202': 'iconfont icon-qialuli',
					'203': 'iconfont icon-food',
					'204': 'iconfont icon-denglu',
				},
			}
		},
		//这个created方法，相当于onload事件，页面一加载就执行
		created() {
			//查询我的菜单列表
			this.getMenuList();
		},
		methods: {
			//安全退出
			logout() {
				window.sessionStorage.clear();
				this.$router.push("/login");
			},
			//获取导航菜单
			async getMenuList() {
				//发get请求，获取数据
				const {
					data: res
				} = await this.$http.get("menus");
				console.log(res);
				if (res.status != 200) {
					return this.$message.error("导航菜单获取击败！")
				}
				this.menuList = res.data; //数据对接
			},
			// 切换菜单折叠与展开
			toggleCollapase() {
				this.isCollapse = !this.isCollapse;
			},
		},
	};
</script>

<style style lang="less" scoped>
	/* 布局样式 */
	.home-container {
		height: 100%;
	}

	/* 头部 */
	.el-header {
		background-color: #373d41;
		display: flex;
		justify-content: space-between;
		/* 两端对齐 */
		color: #FFFFFF;
		font-size: 20px;
		align-items: center;

		// >div {
		// 	//左侧div加布局
		// 	display: flex;
		// 	align-items: center;

		// 	span {
		// 		margin-left: 15px;
		// 	}
		// }
	}

	/* 侧边栏 */
	.el-aside {
		background-color: #333744;

		//去掉子菜单的有边框
		.el-menu {
			border-right: none;
		}
	}

	/* 主体 */
	.el-main {
		background-color: #eaedf1;
	}

	/* logo */
	.logo {
		width: 40px;
		height: 40px;
	}

	// 折叠按钮
	.toggle-button {
		background-color: #4A5064;
		font-size: 10px;
		line-height: 24px;
		color: #fff;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer; // 显示鼠标指针为：小手
	}
</style>

2、新建Welcome组件

代码语言：javascript
代码运行次数：0
复制
<template>
	<div>
		<h3>欢迎来到你的运动健康平台！</h3>
		
	</div>
</template>

<script>
	export default{
		
	}
</script>

<style lang="less" scoped>
	
</style>

3、在index.js引入组件和配置路由

代码语言：javascript
代码运行次数：0
复制
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入login组件
import Login from '../components/Login.vue'
//引入home组件
import Home from '../components/Home.vue'
//引入欢迎界面组件
import Welcome from '../components/Welcome.vue'

Vue.use(VueRouter)

const routes = [
  {
    path:"/",
    //将首页“/”重定向到“/login”
    redirect:"/login"
  },{
    //将上面引入的Login与“/login”访问路径进行绑定
    path:"/logina",
    component:Login
  },{
    //将上面引入的Home与“/home”访问路径进行绑定
    path:"/home",
    component:Home,
	redirect:"/welcome",
	children:[
		{
			path:"/welcome",
			component:Welcome
		}
	]
  }
]

const router = new VueRouter({
  routes
})

export default router

4、最终效果

二、侧边导航Main区域路由

1、修改Home页面

图解：
代码：
代码语言：javascript
代码运行次数：0
复制
<template>
	<!-- 引入布局 -->
	<el-container class="home-container">
		<!-- 头部 -->
		<el-header>
			<div>
				<img class="logo" src="../assets/logo.png" />
			</div>
			<span class="title">个人运动平台</span>
			<el-button class="info" @click="logout()"> 安全退出！ </el-button>
		</el-header>
		<!-- 主体 -->
		<el-container>
			<!-- 侧边栏 -->
			<el-aside :width="isCollapse?'64px':'200px'">
				<div class="toggle-button" @click="toggleCollapase">|||</div>
				<el-menu class="el-menu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened
				 :collapse="isCollapse" :collapse-transition="false" :router="true">
					<!-- 当一个模块展开的时候关闭其他模块 -->
					<!-- <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened> -->
					<!-- index要唯一，就不会造成问题出现了 -->
					<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
						<template slot="title">
							<i :class="iconsObject[item.id]"></i>
							<span>{{item.title}}</span>
						</template>
						<!-- index要唯一，就不会造成问题出现了 -->
						<el-menu-item :index="it.path" v-for="it in item.subMenuList" :key="it.id">
							<i :class="iconsObject[it.id]"></i>
							<span>{{it.title}}</span>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<!-- 主体 -->
			<el-main>
				<!-- 路由 -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				//菜单列表
				menuList: [],
				isCollapse: false,
				iconsObject: {
					'100': 'iconfont icon-guanliyuan',
					'200': 'iconfont icon-yundong',
					'101': 'iconfont icon-denglu',
					'102': 'iconfont icon-mima',
					'103': 'iconfont icon-yundong',
					'104': 'iconfont icon-shangpin',
					'201': 'iconfont icon-shu',
					'202': 'iconfont icon-qialuli',
					'203': 'iconfont icon-food',
					'204': 'iconfont icon-denglu',
				},
			}
		},
		//这个created方法，相当于onload事件，页面一加载就执行
		created() {
			//查询我的菜单列表
			this.getMenuList();
		},
		methods: {
			//安全退出
			logout() {
				window.sessionStorage.clear();
				this.$router.push("/login");
			},
			//获取导航菜单
			async getMenuList() {
				//发get请求，获取数据
				const {
					data: res
				} = await this.$http.get("menus");
				console.log(res);
				if (res.status != 200) {
					return this.$message.error("导航菜单获取击败！")
				}
				this.menuList = res.data; //数据对接
			},
			// 切换菜单折叠与展开
			toggleCollapase() {
				this.isCollapse = !this.isCollapse;
			},
		},
	};
</script>

<style style lang="less" scoped>
	/* 布局样式 */
	.home-container {
		height: 100%;
	}

	/* 头部 */
	.el-header {
		background-color: #373d41;
		display: flex;
		justify-content: space-between;
		/* 两端对齐 */
		color: #FFFFFF;
		font-size: 20px;
		align-items: center;

		// >div {
		// 	//左侧div加布局
		// 	display: flex;
		// 	align-items: center;

		// 	span {
		// 		margin-left: 15px;
		// 	}
		// }
	}

	/* 侧边栏 */
	.el-aside {
		background-color: #333744;

		//去掉子菜单的有边框
		.el-menu {
			border-right: none;
		}
	}

	/* 主体 */
	.el-main {
		background-color: #eaedf1;
	}

	/* logo */
	.logo {
		width: 40px;
		height: 40px;
	}

	// 折叠按钮
	.toggle-button {
		background-color: #4A5064;
		font-size: 10px;
		line-height: 24px;
		color: #fff;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer; // 显示鼠标指针为：小手
	}
</style>

2、新建UserList页面（组件）

代码语言：javascript
代码运行次数：0
复制
<template>
	<div>用户列表</div>
</template>

<script>
	export default{
		
	}
</script>

<style lang="less" scoped>
</style>

3、在index.js引入UserList组件，并配置路由

代码语言：javascript
代码运行次数：0
复制
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入login组件
import Login from '../components/Login.vue'
//引入home组件
import Home from '../components/Home.vue'
//引入欢迎界面组件
import Welcome from '../components/Welcome.vue'
//引入用户列表页面
import UserList from '../components/admin/UserList.vue'

Vue.use(VueRouter)

const routes = [
  {
    path:"/",
    //将首页“/”重定向到“/login”
    redirect:"/login"
  },{
    //将上面引入的Login与“/login”访问路径进行绑定
    path:"/logina",
    component:Login
  },{
    //将上面引入的Home与“/home”访问路径进行绑定
    path:"/home",
    component:Home,
	redirect:"/welcome",
	children:[
		{path:"/welcome",component:Welcome},
		{path:"/user",component:UserList}
	]
  }
]

const router = new VueRouter({
  routes
})

export default router

4、最终效果

二、路径记忆

（目的是在哪刷新的，刷新之后还回到哪）

1、修改Home页面

代码语言：javascript
代码运行次数：0
复制
<template>
	<!-- 引入布局 -->
	<el-container class="home-container">
		<!-- 头部 -->
		<el-header>
			<div>
				<img class="logo" src="../assets/logo.png" />
			</div>
			<span class="title">个人运动平台</span>
			<el-button class="info" @click="logout()"> 安全退出！ </el-button>
		</el-header>
		<!-- 主体 -->
		<el-container>
			<!-- 侧边栏 -->
			<el-aside :width="isCollapse?'64px':'200px'">
				<div class="toggle-button" @click="toggleCollapase">|||</div>
				<el-menu class="el-menu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened
				 :collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="activePath">
					<!-- 当一个模块展开的时候关闭其他模块 -->
					<!-- <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened> -->
					<!-- index要唯一，就不会造成问题出现了 -->
					<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
						<template slot="title">
							<i :class="iconsObject[item.id]"></i>
							<span>{{item.title}}</span>
						</template>
						<!-- index要唯一，就不会造成问题出现了 -->
						<el-menu-item :index="it.path" v-for="it in item.subMenuList" :key="it.id" @click="saveNavState(it.path)">
							<i :class="iconsObject[it.id]"></i>
							<span>{{it.title}}</span>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<!-- 主体 -->
			<el-main>
				<!-- 路由 -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				//菜单列表
				menuList: [],
				isCollapse: false,
				iconsObject: {
					'100': 'iconfont icon-guanliyuan',
					'200': 'iconfont icon-yundong',
					'101': 'iconfont icon-denglu',
					'102': 'iconfont icon-mima',
					'103': 'iconfont icon-yundong',
					'104': 'iconfont icon-shangpin',
					'201': 'iconfont icon-shu',
					'202': 'iconfont icon-qialuli',
					'203': 'iconfont icon-food',
					'204': 'iconfont icon-denglu',
				},
				activePath:"/welcome"
			}
		},
		//这个created方法，相当于onload事件，页面一加载就执行
		created() {
			//查询我的菜单列表
			this.getMenuList();
			this.activePath = window.sessionStorage.getItem("activePath");
		},
		methods: {
			//安全退出
			logout() {
				window.sessionStorage.clear();
				this.$router.push("/login");
			},
			//获取导航菜单
			async getMenuList() {
				//发get请求，获取数据
				const {
					data: res
				} = await this.$http.get("menus");
				console.log(res);
				if (res.status != 200) {
					return this.$message.error("导航菜单获取击败！")
				}
				this.menuList = res.data; //数据对接
			},
			// 切换菜单折叠与展开
			toggleCollapase() {
				this.isCollapse = !this.isCollapse;
			},
			saveNavState(activePath){
				window.sessionStorage.setItem("activePath",activePath);//存放到session里
				this.activePath = activePath;
			}
		},
	};
</script>

<style style lang="less" scoped>
	/* 布局样式 */
	.home-container {
		height: 100%;
	}

	/* 头部 */
	.el-header {
		background-color: #373d41;
		display: flex;
		justify-content: space-between;
		/* 两端对齐 */
		color: #FFFFFF;
		font-size: 20px;
		align-items: center;

		// >div {
		// 	//左侧div加布局
		// 	display: flex;
		// 	align-items: center;

		// 	span {
		// 		margin-left: 15px;
		// 	}
		// }
	}

	/* 侧边栏 */
	.el-aside {
		background-color: #333744;

		//去掉子菜单的有边框
		.el-menu {
			border-right: none;
		}
	}

	/* 主体 */
	.el-main {
		background-color: #eaedf1;
	}

	/* logo */
	.logo {
		width: 40px;
		height: 40px;
	}

	// 折叠按钮
	.toggle-button {
		background-color: #4A5064;
		font-size: 10px;
		line-height: 24px;
		color: #fff;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer; // 显示鼠标指针为：小手
	}
</style>

2、最终效果

（Main的东西基本是知道怎么添加的了，我们结束这个笔记，我要去刷鞋了18点03分）

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除
安全
el
布局
路由
重定向

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

安全
el
布局
路由
重定向
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 一、Main区重定向
    • 1、在Main区添加路由标签
    • 2、新建Welcome组件
    • 3、在index.js引入组件和配置路由
    • 4、最终效果
  • 二、侧边导航Main区域路由
    • 1、修改Home页面
      • 图解：
      • 代码：
    • 2、新建UserList页面（组件）
    • 3、在index.js引入UserList组件，并配置路由
    • 4、最终效果
  • 二、路径记忆
    • 1、修改Home页面
    • 2、最终效果
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论