若依 Vue3 前端分离 3.8.8 版实现去除首页,登录后跳转至动态路由的第一个路由的页面

一、前言

        某些项目可能并不需要首页,但在若依中想要实现不显示首页,并根据不同角色登录后跳转至该角色的第一个动态路由的页面需要自己实现,若依中没有实现该功能的特定代码。

二、代码

1. src\permission.js

在 src\permission.js 中添加下面的代码,可将原有代码注释。

router.beforeEach((to, from, next) => {NProgress.start()if (getToken()) {to.meta.title && useSettingsStore().setTitle(to.meta.title)/* has token*/if (to.path === '/login') {next({ path: '/' })NProgress.done()} else if (whiteList.indexOf(to.path) !== -1) {next()} else {if (useUserStore().roles.length === 0) {isRelogin.show = true// 判断当前用户是否已拉取完user_info信息useUserStore().getInfo().then(() => {isRelogin.show = falseusePermissionStore().generateRoutes().then(accessRoutes => {// 根据roles权限生成可访问的路由表accessRoutes.forEach(route => {if (!isHttp(route.path)) {router.addRoute(route) // 动态添加可访问路由表console.log(route,"route")}})console.log(to.fullPath,"to.fullPath")if (to.fullPath == '/index') {console.log(accessRoutes,"accessRoutes")// 当登录之后,直接通过ip地址和端口号访问时,跳转到第一个路由页面indexPagelet pathIndex = ''//通过权限返回菜单去避免 如有首页权限 出现//index 情况if (accessRoutes[0].path == '/') {// 一级路由就是可以打开的页面pathIndex = accessRoutes[0].path + accessRoutes[0].children[0].pathconsole.log(pathIndex,"pathIndex1")} else{// 一级路由下面的二级路由才是可以打开的页面pathIndex = accessRoutes[0].path + '/' + accessRoutes[0].children[0].pathconsole.log(pathIndex,"pathIndex2")}next({ path: pathIndex, replace: true }) // hack方法 确保addRoutes已完成} else {next({ ...to, replace: true }) // hack方法 确保addRoutes已完成}})}).catch(err => {useUserStore().logOut().then(() => {ElMessage.error(err)next({ path: '/' })})})} else {next()}}} else {// 没有tokenif (whiteList.indexOf(to.path) !== -1) {// 在免登录白名单,直接进入next()} else {next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页NProgress.done()}}
})

2. src\store\modules\permission.js

在 src\store\modules\permission.js 的原有代码中添加下面的代码。

const usePermissionStore = defineStore('permission',{state: () => ({routes: [],addRoutes: [],defaultRoutes: [],topbarRouters: [],sidebarRouters: [],indexPage: ''   //修改默认首页}),actions: {setRoutes(routes) {this.addRoutes = routesthis.routes = constantRoutes.concat(routes)},setDefaultRoutes(routes) {this.defaultRoutes = constantRoutes.concat(routes)},setTopbarRoutes(routes) {this.topbarRouters = routes},setSidebarRouters(routes) {this.sidebarRouters = routes},setIndexPages(routes) {this.indexPage = routes},generateRoutes(roles) {return new Promise(resolve => {// 向后端请求路由数据getRouters().then(res => {// 默认显示第一个路由,不可关闭,这三行代码一定不要忘记,否则把所有页面关闭后首页会突然跳出来而且无法关闭。if (res.data.length && res.data[0].children && res.data[0].children.length ) {res.data[0].children[0].meta.affix = true}const sdata = JSON.parse(JSON.stringify(res.data))const rdata = JSON.parse(JSON.stringify(res.data))const defaultData = JSON.parse(JSON.stringify(res.data))let firstPage = ''//通过权限返回菜单去避免 如有首页权限 出现//index 情况if (res.data[0].path == '/') {firstPage = res.data[0].path + res.data[0].children[0].path} else{firstPage = res.data[0].path + '/' + res.data[0].children[0].path}const sidebarRoutes = filterAsyncRouter(sdata)const rewriteRoutes = filterAsyncRouter(rdata, false, true)const defaultRoutes = filterAsyncRouter(defaultData)const asyncRoutes = filterDynamicRoutes(dynamicRoutes)asyncRoutes.forEach(route => { router.addRoute(route) })// this.setRoutes(rewriteRoutes) 注释后就不显示 Tags-Views 中无法关闭的首页this.setSidebarRouters(constantRoutes.concat(sidebarRoutes))this.setDefaultRoutes(sidebarRoutes)this.setTopbarRoutes(defaultRoutes)this.setIndexPages(firstPage)resolve(rewriteRoutes)})})}}})

3. src\layout\components\Sidebar\Logo.vue

在 src\layout\components\Sidebar\Logo.vue 的原有代码中添加下面的代码。

:to="permissionStore.indexPage"
import usePermissionStore from '@/store/modules/permission'const permissionStore = usePermissionStore()

4. src\components\Breadcrumb\index.vue

在 src\components\Breadcrumb\index.vue 中注释下面的代码,顶部的路径就不会显示首页字样。

5. src\router\index.js

在 src\router\index.js 中添加下面的代码,首页将不会在侧边栏中出现。

hidden: true,

三、效果

效果如图,首页相关的全都消失,登录后默认跳转到第一个路由,不同角色跳转到不同的页面,是动态路由。

四、参考

https://blog.csdn.net/YanBin_Best/article/details/140657213
https://ruoyi.csdn.net/66c84202a1ed2f4c853c6289.html

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记录一下oceanbase数据库导出数据到mysql

导出 SQL 文件 使用 mysqldump 工具从 OceanBase 导出 SQL 文件到 output2222.sql。在这一步中,你需要确保你有正确的权限和数据库访问配置。 mysqldump -h 192.168.191.72 -P 2881 -u rootA_a -p密码 rhzfdb > output2222.sql清理 SQL 文件 使用 sed 命令批量…

VSCode编程配置再次总结

VScode 中C++编程再次总结 0.简介 1.配置总结 1.1 launch jsion文件 launch.json文件主要用于运行和调试的配置,具有程序启动调试功能。launch.json文件会启用tasks.json的任务,并能实现调试功能。 左侧任务栏的第四个选项运行和调试,点击创建launch.json {"conf…

探索 ShellGPT:终端中的 AI 助手

文章目录 探索 ShellGPT:终端中的 AI 助手背景介绍ShellGPT 是什么?如何安装 ShellGPT?简单的库函数使用方法场景应用常见问题及解决方案总结 探索 ShellGPT:终端中的 AI 助手 背景介绍 在当今快速发展的技术领域,命…

【TypeScript入坑】什么是TypeScript?

TypeScript入坑 什么是 TypeScriptTypeScript 的优势 什么是 TypeScript TypeScript:是 JavaScript 的超集,拥有类型机制,不会再浏览器直接执行,而是编译成 JavaScript 后才会运行。 超集(superset)&…

Redis中的setnx的使用场景

Redis中的SETNX命令是一个非常有用的工具,特别是在处理分布式系统和并发控制时。SETNX是“Set if Not Exists”的缩写,用于设置键的值,但仅当键不存在时。以下是SETNX命令的一些主要使用场景: 1. 分布式锁 在分布式环境中&#…

查询最近正在执行的sql(DM8 : 达梦数据库)

查询最近正在执行的sql DM8 : 达梦数据库 1 查询最近正在执行的sql2 更多达梦数据库学习使用列表 1 查询最近正在执行的sql 迁移数据时 , 业务无响应 , 查看最近活动的sql , 有没有迁移相关的表 , 通过最后的时间字段 , 判断会话是否正在执行 SELECT SESS_ID, SQL_TEXT, STATE…

ZABBIX监控 EMQTT服务思路及实施全过程(含脚本及模板)

系统环境 ZABBIX服务器:centos7,zabbix6.4,jq,zabbix-sender-3.0.5 EMQX服务器:centos7, emqx4.4.3 监控思路 通过 EMQX 的 API 获取实时监控数据(包括统计信息和指标),然后将这些数据发送到 Zabbix 服务器进行监控。具体来说,脚本执行了以下操作: 从 EMQX API 获…

[leetcode]112_路径总和_判断是否存在

给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。 判断该树中是否存在 根节点到叶子节点 的路径,这条路径上所有节点值相加等于目标和 targetSum 。 如果存在,返回 true ;否则,返回 false 。 叶子节点 是指没有子节点…

redis哨兵启动出现 +sdown master mymaster 192.168.x.x

场景: 搭建好哨兵之后,哨兵一启动,过了30秒就会判断master sdown,但是检查配置是没有问题。 日志: Redis-master启动日志:没看到任何异常,所以master无异常 Redis-哨兵启动日志: …

(已解决)vscode如何传入argparse参数来调试/运行python程序

文章目录 前言调试传入参数运行传入参数延申 前言 以前,我都是用Pycharm专业版的,由于其好像在外网的时候,不能够通过VPN来连接内网服务器,我就改用了vscode。改用了之后,遇到一个问题,调试或者运行python…

常见服务端口号和中文大全

ServiceChinesePortExplainFTP文件传输协议20数据FTP文件传输协议21连接SSH安全外壳协议22SMTP简单邮件传输协议25DNS域名解析协议53DHCP动态主机配置协议67服务端DHCP动态主机配置协议68客户端HTTP超文本传输协议80Kerberos网络认证协议88POP3邮局协议110RPC远程过程调用111IM…

QT编译之后的debug包下运行程序双击运行出现无法定位程序输入点__gxx_personlity_seh0于动态链接库

1.出现这个错误的原因是: 缺少如下文件: 2.解决方法: 在运行程序.exe所在的目录执行:windeployqt untitled.exe(指打包的运行程序) 3.如果执行提示由于找不到qt5core.dll,无法继续执行代码和无法识别win…

MATLAB与Docker Compose:实现微服务API文档的自动化部署与Vue.js集成

在微服务架构中,服务之间的通信和协作是构建复杂应用的关键。随着服务数量的增加,管理和维护这些服务的API文档变得尤为重要。MATLAB作为一个强大的数学计算和可视化工具,其在微服务API文档的自动化部署中扮演着重要角色。本文将详细介绍如何…

pgvector docker版安装;稀疏向量使用;psycopg2 python连接使用

参看: https://cloud.tencent.com/developer/article/2359831 https://hub.docker.com/r/pgvector/pgvector/tags https://github.com/pgvector/pgvector 一、安装 拉取0.7版本 docker pull pgvector/pgvector:0.7.4-pg16运行: docker run --name pgvector -v $(pwd)/dat…

linux StarRocks 安装

一、检查服务器是否支持avx2,如果执行命令显示空,则不支持,那么安装后无法启动BE cat /proc/cpuinfo |grep avx2我的支持显示如下: 二、安装 docker run -p 9030:9030 -p 8030:8030 -p 8040:8040 -p 9001:9000 --privilegedtrue…

随机掉落的项目足迹:Vue3 + wangEditor5富文本编辑器——toolbar.getConfig() 查看工具栏的默认配置

问题引入 小提示:问题引入是一个讲故事的废话环节,各位小伙伴可以直接跳到第二大点:问题解决 我的项目不需要在富文本编辑器中引入添加代码块的功能,于是我寻思在工具栏上把操作代码的菜单删一删 于是我来到官网文档工具栏配置 …

MyBatis 深层次 Map 自动嵌套:解锁数据映射新境界

在 Java 开发的征程中,MyBatis 以其强大的数据库映射功能而备受青睐。其中,深层次 Map 自动嵌套这一特性更是为开发者带来了诸多惊喜与便利。 前提:首先开启自动映射! java和mysql命名规则不一样,每次在mybatis中起别…

动态规划part07

LC 198.打家劫舍 关键:dp[i]的含义是考虑下标i及之前,能偷的最多的钱是多少,那么对于下标i 有 两种情况,偷或不偷 , 这又依赖于前一个房间,和前前个房间是否被偷。若偷 i , 那么dp[i] dp[i-2]…

我的AI工具箱Tauri版-MicrosoftTTS文本转语音

本教程基于自研的AI工具箱Tauri版进行MicrosoftTTS文本转语音服务。 MicrosoftTTS文本转语音服务 是自研的AI工具箱Tauri版中的一款功能模块,专为实现高效的文本转语音操作而设计。通过集成微软TTS服务,用户可以将大量文本自动转换为自然流畅的语音文件…

9/24作业

1. 分文件编译 分什么要分文件编译? 防止主文件过大,不好修改,简化编译流程 1) 分那些文件 头文件:所有需要提前导入的库文件,函数声明 功能函数:所有功能函数的定义 主函数:main函数&…