VUE3项目实现动态路由demo

文章目录

      • 1、创建vue项目
      • 2、安装常用的依赖
        • 2.1 安装elementUI
        • 2.2 安装axios
        • 2.3 安装router
        • 2.4 安装vuex
        • 2.5 安装store
        • 2.6 安装mockjs
      • 3、编写登录页面以及逻辑
      • 4、编写首页以及逻辑
      • 5、配置router.js
      • 6、配置store.js
      • 7、配置menuUtils.js（动态路由重点）
      • 8、配置main.js
      • 9、编写mock.js
      • 10、项目结构
      • 11、启动：

1、创建vue项目

vue create orkasgb-vue3-app

2、安装常用的依赖

2.1 安装elementUI

npm install element-plus --save

2.2 安装axios

npm i --save axios

2.3 安装router

npm install vue-router

2.4 安装vuex

npm install vuex

2.5 安装store

npm install store

2.6 安装mockjs

// -D表示在开发环境中使用
npm install mockjs -D

3、编写登录页面以及逻辑

编写登录页面
请添加图片描述

登录逻辑实现：

/**
* 登录
*/
submitForm() {
	this.$refs["elForm"].validate((valid) => {
		if (!valid) return;
		// 请求后台，验证登录信息
		this.$axios
		.post("/test/api/login", "{}")
		.then((resp) => {
			if (resp.status == "200" && resp.data &&
				resp.data.code == "200" && resp.data.data.legth != 0) {
					// 登录成功后，用户信息缓存
					localStorage.setItem("UserInfor", JSON.stringify(resp.data.data));
					window.sessionStorage.setItem(
					"UserInfor",
					JSON.stringify(resp.data.data)
					);
					this.$message.info(resp.data.message);
					// 登录成功后，缓存token
					this.$store.commit("setToken", resp.data.data.token);
					window.sessionStorage.setItem("token", resp.data.data.token);
					// 登录成功后，跳转到home页
					this.$router.replace("/home");
			} else {
				this.$message.error("登录失败！");
			}
		});
	});
}

4、编写首页以及逻辑

首页布局：
请添加图片描述

逻辑：

// 数据来源配置
data() {
	return {
		formData: {
			userInfor: window.sessionStorage.getItem("UserInfor"), // 获取用户信息，直接从sessionStorage中获取，在登录的时候已经保存在sessionStorage中
		}
	};
},

/**
* 左侧菜单栏，直接通过监听路由，开启el-menu组件中路由模式实现
*/
// 开启el-menu组件中路由模式
<el-menu router="true"></el-menu>
// computed方法可以不断的监听路由变化，并当路由有变化时返回路由，并且computed方法是由缓存的，比watch性能好
computed: {
	routers() {
		return this.$store.state.routes;
	},
},

/**
* 退出登录
*/
loginOut() {
	// 退出登录时，删除缓存的用户信息
	localStorage.removeItem("UserInfor");
	// 退出登录时，删除缓存的token
	this.$store.commit("delToken", "token");
	// 退出登录时，删除缓存的路由
	this.$store.commit("initRouters", []);
	// 退出登录时，跳转到登录页面
	this.$router.replace("/");
}

5、配置router.js

import { createRouter, createWebHashHistory } from 'vue-router'
/**
* 设置固定的路由，一般是登录页面的路由是固定的
*/
const routes = [
	{
		path: "/",
		name: "login",
		component: () => import("../components/LoginPage.vue")
	},
	{
		path: "/home",
		name: "home",
		component: () => import("../components/HomePage.vue")
	}
];

/**
* 路由配置，比如设置路由模式为hash
*/
const router = createRouter({
	history: createWebHashHistory(),
	routes
});

export default router;

6、配置store.js

import Vuex from 'vuex'
/**
* vuex是一个状态管理器，比如我们的一些项目信息可以用vuex来管理。
*/
export default new Vuex.Store({
state: {
	routes: [],// 缓存动态路由
	token: '' // 缓存token
	},

// 同步执行。
mutations: {
	// 初始化动态路由
	initRouters(state, data) {
	state.routes = data;
	},

// 设置token
setToken(state, token) {
	state.token = token
	sessionStorage.token = token
	},

// 删除token
delToken(state) {
	state.token = ''
	sessionStorage.removeItem('token')
	}
},

// 异步执行
actions: {}
})

7、配置menuUtils.js（动态路由重点）

import axios from 'axios'
/**
* 初始化菜单，从后台获取动态菜单
*
* @param {登录ID} logId
* @param {路由} router
* @param {缓存} store
*/
const initMenu = function (logId, router, store) {
	axios.post("/test/api/menu", { logId: logId }).then((resp) => {
		console.log(resp);
		if (resp.status == "200" && resp.data && resp.data.code == "200" && resp.data.data.legth != 0) {
			// 动态路由请求成功后，将路由格式化成vue能识别的路由形式
			var fmtRouters = formatRouters(resp.data.data);
			
			// 将格式化好的路由添加到router中
			fmtRouters.forEach(fmtRouter => router.addRoute(fmtRouter));
			
			// 缓存格式化好的路由
			store.commit('initRouters', fmtRouters);
		}
	});
}

/**
* 格式化动态路由
*
* @param menus 动态路由
*/
const formatRouters = (menus) => {
	if (menus.legth == 0) {
		return;
	}

	let fmtRouters = [];
	menus.forEach(menu => {
		let {name, path, compent, children} = menu;
	
		// 递归格式化children路由
		if (children && children instanceof Array) {
			children = formatRouters(children);
		}
	
		let fmtRouter = {
			name: name,
			path: '/' + path,
			// 重点，从后台返回的component实际上的一个字符串，vue不认识，需要转化成vue能认识的component，才能跳转页面
			component: () => import(`@/components/${compent}.vue`), 
			children: children
		};
	
		fmtRouters.push(fmtRouter);
	});

	return fmtRouters;
}

export default initMenu;

8、配置main.js

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import { ElMessage } from 'element-plus'
// 导入elementUI图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 导入elementUI样式
import 'element-plus/dist/index.css'
// 导入路由
import router from './router/router'
// 导入store缓存
import store from './store/sotre';
// 导入axios，用于发送请求
import axios from 'axios'
// 导入vuex，状态管理
import Vuex from 'vuex'
// 导入自定义的菜单工具
import initMenu from './utils/menuUtils'
// 导入mock
import './mock/mock'

const app = createApp(App);
app.use(ElementPlus)
app.use(router)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}

// 设置全局侗剧，比如在组件中可以使用this.$axios等
app.config.globalProperties.$axios = axios;
app.config.globalProperties.$store = store;
app.config.globalProperties.$message = ElMessage;
app.config.globalProperties.$vuex = Vuex;
app.mount('#app')

/**
* 路由守卫，每一次路由跳转都会进入这里。
*/
router.beforeEach((to, from, next) => {

	// 如果token不存在，也就是没登录，那么直接跳转到登录页
	const token = window.sessionStorage.getItem("token");
	if (null == token || !token || token.length == 0) {
		next();
		return;
	}

	// 如果token存在，就说明登录成功，去初始化菜单
	initMenu("toney", router, store);
	next();
});

9、编写mock.js

import Mock from 'mockjs'

/**
* 登录验证
*/
Mock.mock("/test/api/login","post",(options)=>{
	console.log("mock--/test/api/login",options)
	return Mock.mock({"code":"200","message":"登录成功","data|1":[{"id|+1":334,"name":"@cname","logId":"toney","image":"@image","token":"YUGXSIBXISBXI468327943849OONONON"}]})
})

/**
* 获取动态路由
*/
Mock.mock("/test/api/menu","post",(options)=>{
	console.log("mock--/test/api/menu",options)
	return Mock.mock({"code":"200","message":"初始化菜单菜单成功！","data":[{"id|+1":100000247,"userId":"1","name":"home","path":"home","compent":"HomePage","children":[{"id|+1":100000247,"userId":"1","name":"name1","path":"compent1Page","compent":"Compent1Page"},{"id|+1":100000247,"userId":"2","name":"name2","path":"compent2Page","compent":"Compent2Page"},{"id|+1":100000247,"userId":"2","name":"name3","path":"compent3Page","compent":"Compent3Page"},{"id|+1":100000247,"userId":"2","name":"name4","path":"compent4Page","compent":"Compent4Page"},{"id|+1":100000247,"userId":"1","name":"name5","path":"compent5Page","compent":"Compent5Page"},{"id|+1":100000247,"userId":"2","name":"name6","path":"compent6Page","compent":"Compent6Page"}]}]})
})

Mock.setup({timeout:300})

10、项目结构

请添加图片描述

11、启动：

请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/6488.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

树的前序遍历与中序遍历构造二叉树和树的中序遍历与后序遍历构造二叉树

树的前序遍历与中序遍历构造二叉树和树的中序遍历与后序遍历构造二叉树

目录 一.树的前序遍历与中序遍历构造二叉树 1.题目描述 2.问题分析 3.代码实现 二.树的中序遍历与后序遍历构造二叉树 1.题目描述 2.问题分析 3.代码实现 三.问题思考 一.树的前序遍历与中序遍历构造二叉树 1.题目描述 给定两个整数数组 preorder 和 inorder &#xf…
阅读更多...
【机器学习】Logistic回归---学习笔记

【机器学习】Logistic回归---学习笔记

Logistic回归学习笔记Logistic回归学习线路预备知识&#xff1a;建议先去B站学习一下信息量&#xff0c;熵&#xff0c;BL散度&#xff0c;交叉熵的概念。Logistic回归的函数模型损失最小化架构分类函数最大概率分类函数阈值分类函数Logistic回归的优化算法梯度下降随机梯度下降…
阅读更多...
4.5--计算机网络之基础篇--2.网址到网页解析--（复习＋深入）---好好沉淀，加油呀

4.5--计算机网络之基础篇--2.网址到网页解析--（复习＋深入）---好好沉淀，加油呀

1.浏览器做的第一步工作是解析 URL 对 URL 进行解析&#xff0c;从而生成发送给 Web 服务器的请求信息 URL? URL 实际上是请求服务器里的文件资源 当没有路径名时&#xff0c;就代表访问根目录下事先设置的默认文件&#xff0c;也就是 /index.html 或者 /default.html 这些文件…
阅读更多...
计算机网络复习笔记（三）物理层

计算机网络复习笔记（三）物理层

文章目录一物理层的基本概念四大特性&#xff1a;两种信号&#xff1a;调制和编码传输介质三大部分二物理层的基本通信技术四种信道复用技术数据的传输方式三OSI模型一物理层的基本概念 四大特性&#xff1a; 机械特性 接口是怎么样的 电气特性 用多少伏的电 功能特性 线路上…
阅读更多...
linux基础之计算机基础

linux基础之计算机基础

一、计算机基础 &#xff08;1) 计算机发展&#xff1a;电子管、晶体管、集成电路、大规模集成电路 &#xff08;2) 冯诺依曼体系&#xff1a;用二进制表示数据和指令&#xff1b; 存储程序控制&#xff0c;程序和数据预先存入存储器&#xff1b; 计算机系统5大部分&#xf…
阅读更多...
Python 高级编程（文件操作）

Python 高级编程（文件操作）

文件&#xff1a;存储在某种长期存储设备上的数据&#xff01;&#xff01;包括&#xff08;硬板 u 盘 移动硬盘 光盘&#xff09; 计算机中临时的数据&#xff1a; 存储在内存中&#xff0c;一旦操作结束&#xff0c;内存中的空间就会被释放 文件&#xff08;特指普通文本&am…
阅读更多...
R语言 4.2.2安装包下载及安装教程

R语言 4.2.2安装包下载及安装教程

[软件名称]:R语言 4.2.2 [软件大小]: 75.6 MB [安装环境]: Win11/Win10/Win7 [软件安装包下载]: https://pan.quark.cn/s/b6f604930d04 R语言软件的GUI界面比较的简陋,只有一个命令行窗口,且每次创建图片都会跳出一个新的窗口,比较的繁琐,我们可以安装RStudio,来更方便的操作R(…
阅读更多...
ChatGPT +工业机器人/自动驾驶控制器的一些尝试

ChatGPT +工业机器人/自动驾驶控制器的一些尝试

ChatGPT 的功能目前已扩展到机器人领域&#xff0c;可以用语言直观控制如机械臂、无人机、家庭辅助机器人等的多个平台。这会改变人机交互的未来形式吗&#xff1f; 你可曾想过用自己的话告诉机器人该做什么&#xff0c;就像对人说话那样&#xff1f; 比如说&#xff0c;只要告…
阅读更多...
多个硬盘挂载到同一个目录

多个硬盘挂载到同一个目录

同一目录无法重复挂载&#xff0c;后挂载的会覆盖之前挂载的磁盘。但是现在需要将4块磁盘并行挂载&#xff0c;该如何操作呢&#xff1f; 将2块磁盘合并到一个逻辑卷 进行挂载。 基本知识 基本概念PV(Physical Volume)- 物理卷物理卷在逻辑卷管理中处于最底层&#xff0c;它可…
阅读更多...
新能源锂电池行业除杂工艺介绍

新能源锂电池行业除杂工艺介绍

近年来新能源汽车快速发展对锂电池的需求引发了人们对锂资源的高度关注。由于锂需求不断上升&#xff0c;全球锂资源越来越紧缺&#xff0c;而在生产含锂产品中会有大量废水、废渣。这些废水废渣含有丰富的锂&#xff0c;对其进行回收提锂具有极高的经济利益。在氟化锂生产中会…
阅读更多...
文件操作介绍及C语言实现通讯录管理系统3.0最终版（文件操作版本）

文件操作介绍及C语言实现通讯录管理系统3.0最终版（文件操作版本）

文章目录1. 前言2. 文件操作2.1 什么是文件2.2 文件缓冲区2.3 文件指针2.4 文件的打开与关闭2.5 文件的顺序读写3. 优化通讯录3.1 保存通讯录3.2 加载通讯录4. 结尾1. 前言 上一篇文章我们学习了动态内存开辟的相关知识点&#xff0c;并用动态内存函数优化了我们的通讯录&…
阅读更多...
【数据库连接，线程，ThreadLocal三者之间的关系】

【数据库连接，线程，ThreadLocal三者之间的关系】

一、数据库连接与线程的关系 在实际项目中&#xff0c;数据库连接是很宝贵的资源&#xff0c;以MySQL为例&#xff0c;一台MySQL服务器最大连接数默认是100, 最大可以达到16384。但现实中最多是到200&#xff0c;再多MySQL服务器就承受不住了。因为mysql连接用的是tcp协议&…
阅读更多...
JAVA：常用API

JAVA：常用API

一.什么是API&#xff1f; API&#xff08;Application Programming Interface&#xff09;&#xff1a;应用程序编程接口。 简单的来说&#xff1a;就是Java帮我们已经写好的方法&#xff0c;我们可以直接使用。 二.有哪些常用的API&#xff1f; Object、Objects、StringB…
阅读更多...
二战华为成功上岸，准备了小半年，要个27k应该也算不上很高吧~

二战华为成功上岸，准备了小半年，要个27k应该也算不上很高吧~

先说下我基本情况&#xff0c;本科不是计算机专业&#xff0c;现在是学通信&#xff0c;然后做图像处理&#xff0c;可能面试官看我不是科班出身没有问太多计算机相关的问题&#xff0c;因为第一次找工作&#xff0c;华为的游戏专场又是最早开始的&#xff0c;就投递了&#xf…
阅读更多...
二，八，十，十六进制等常用进制详解

二，八，十，十六进制等常用进制详解

总目录 文章目录总目录一、常用进制1、进制基本信息2、各进制的表示形式二、进制转换原理1、其他进制转为十进制计算原理2、十进制转为其他进制计算原理3、二进制&#xff0c;八进制&#xff0c;十六进制之间的转换结语一、常用进制 1、进制基本信息 基数数码名称描述20 和 1…
阅读更多...
【C++】| C/C++内存管理

【C++】| C/C++内存管理

前言&#xff1a; 在上期&#xff0c;我们已经对类和对象的全部知识进行了总结和梳理。在类和对象学习完之后&#xff0c;今天我将给大家呈现的是关于——C/C内存管理的基本知识。 本文目录 1. C/C内存分布 2. C语言中动态内存管理方式 &#xff08;1&#xff09;C语言跟内…
阅读更多...
php科研项目申报审批系统

php科研项目申报审批系统

目 录 1 绪论 4 1.1 开发背景 4 1.2 开发意义 4 1.3 相关知识介绍 4 1.3.1 Apache 4 1.3.2 MySQL 5 1.3.3 PHP 6 1.3.4 Dreamweaver CS3 7 1.4 本文所做的工作及组织结构 7 2 系统分析 7 2.1 需求分析 7 2.2 可行性分析 7 2.3 系统界面…
阅读更多...
CSDN博客专家证书发放名单（2023年3月已更新）

CSDN博客专家证书发放名单（2023年3月已更新）

目录 证书发放频次 6月&#xff08;第一批&#xff09;证书发放名单&#xff08;80位&#xff09; 7月&#xff08;第二批&#xff09;证书发放名单&#xff08;50位&#xff09; 8月&#xff08;第三批&#xff09;证书发放名单&#xff08;54位&#xff09; 9月&#xf…
阅读更多...
2个月月活突破1亿，增速碾压抖音，出道即封神的ChatGPT，现在怎么样了？ChatGPT它会干掉测试？

2个月月活突破1亿，增速碾压抖音，出道即封神的ChatGPT，现在怎么样了？ChatGPT它会干掉测试？

从互联网的普及到智能手机&#xff0c;都让广袤的世界触手而及&#xff0c;如今身在浪潮中的我们&#xff0c;已深知其力。 前阵子爆火的ChatGPT&#xff0c;不少人保持观望态度。现如今&#xff0c;国内关于ChatGPT的各大社群讨论&#xff0c;似乎沉寂了不少&#xff0c;现在…
阅读更多...
Prometheus监控实战之Exporter详解

Prometheus监控实战之Exporter详解

1 exporter是什么&#xff1f; 广义上向prometheus提供监控数据的程序都可以成为一个exporter的&#xff0c;一个exporter的实例称为target, exporter来源主要2个方面&#xff0c;一个是社区提供的&#xff0c;一种是用户自定义的。 2 常用exporter 官方和一些社区提供好多ex…
阅读更多...
最新文章

Copyright @ 2022~2023