若依 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,一经查实,立即删除!

相关文章

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 助手 背景介绍 在当今快速发展的技术领域,命…

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

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

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

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

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

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

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

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

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中起别…

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

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

9/24作业

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

828华为云征文|使用Flexus X实例集成ES搜索引擎

目录 一、应用场景 1.1 Flexus X实例概述 1.2 ES搜索引擎 二、安装相关服务 2.1 安装Elasticsearch7.17.0 2.2 安装kibana7.17.0 三、开通安全组规则 四、整体感受 4.1 Flexus X实例 4.2 使用感觉 一、应用场景 1.1 Flexus X实例概述 Flexus X实例是华为云推出的一款…

力扣最热一百题——最小覆盖子串

目录 题目链接:76. 最小覆盖子串 - 力扣(LeetCode) 题目描述 示例 提示: 解法一:滑动窗口 1. 初始化 2. 构建 mapT 3. 滑动窗口 4. checkT 方法 5. 返回结果 Java写法: 运行时间 C写法&#x…

Hbase日常运维

1 Hbase日常运维 1.1 监控Hbase运行状况 1.1.1 操作系统 1.1.1.1 IO 群集网络IO,磁盘IO,HDFS IO IO越大说明文件读写操作越多。当IO突然增加时,有可能:1.compact队列较大,集群正在进行大量压缩操作。 2.正在执行…

微服务Docker相关指令

1、拉取容器到镜像仓库 docker pull xxx //拉取指令到 镜像仓库 例如 docker pull mysql 、docker pull nginx docker images //查看镜像仓库 2、删除资源 2.1、删除镜像仓库中的资源 docker rmi mysql:latest //删除方式一:格式 docker rmi 要…

安卓系统常见问题如native crash,卡顿卡死定位工具命令技巧-android framework实战开发

背景: 有学员朋友近来有问到一些安卓系统开发过程中的一些核心小技能小技巧等,比如native crash在企业里面该如何准确定位具体代码函数,程序卡住,或者长时间没反应,想要看看卡在代码的哪里。针对以上的一些问题&#…

408选择题笔记|自用|随笔记录

文章目录 B树:访问节点建堆!将结点插入空堆广义指令求每个子网可容纳的主机数量虚拟内存的实现方式文件目录项FCB和文件安全性管理级别索引文件三种存取方式及适用器件成组分解访问磁盘次数 C语言标识符 最小帧长物理传输层介质 局域网&广域网考点总…

AIGC基础工具-用于数据分析和数据处理的核心库Pandas介绍

文章目录 1. Pandas 的核心数据结构1.1 Series创建 SeriesSeries 重要属性示例 1.2 DataFrame创建 DataFrameDataFrame 重要属性示例 2. Pandas 数据的导入与导出2.1 读取 CSV 文件2.2 读取 Excel 文件2.3 写入 CSV 文件2.4 读取 JSON 文件 3. Pandas 的数据操作3.1 数据选择和…

IPsec-Vpn

网络括谱图 IPSec-VPN 配置思路 1 配置IP地址 FWA:IP地址的配置 [FW1000-A]interface GigabitEthernet 1/0/0 [FW1000-A-GigabitEthernet1/0/0]ip address 10.1.1.1 24 [FW1000-A]interface GigabitEthernet 1/0/2 [FW1000-A-GigabitEthernet1/0/2]ip address