若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由

news2024/11/18 21:30:42

若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由

  • 若依框架VUE前端界面,登录后默认跳转至动态路由第一路由(第一个子菜单)
    • 一、登录后跳转第一路由界面
    • 二、设置路由的首页路径,方便后续的获取
    • 三、点击若依的logo跳转的页面的修改
    • 四、关闭所有tagview后,会展示默认页面,设置禁止关闭首界面
    • 五、个人中心关闭按钮后跳转的页面,防止点击关闭后页面空掉
    • 六、隐藏掉若依原本导航中的首页
    • 七、401和404页面返回首页,返回至默认首页
    • 八、屏蔽首页
    • 九、重新登陆页面修改

若依框架VUE前端界面,登录后默认跳转至动态路由第一路由(第一个子菜单)

一、登录后跳转第一路由界面

找到src目录下permission.js文件,作如下改动(如果存在路由参数,则带入):
在这里插入图片描述

let path = '';
path = accessRoutes[0].path + '/' + accessRoutes[0].children[0].path //获取第一路由路径

if (accessRoutes[0].children[0].query !== undefined) { //如果当前路由存在路由参数,则带入
  let query = JSON.parse(accessRoutes[0].children[0].query);
  let temp = '';
  for (var val in query) {
    if (temp.length == 0) {
      temp = "?";
    } else {
      temp = temp + "&";
    }
    temp = temp + val + "=" + query[val];
  }
  path = path + temp;
}

if (from.path == '/login') {
  next({path, replace: true}) // hack方法 确保addRoutes已完成
} else {
  next({...to, replace: true}) // hack方法 确保addRoutes已完成
}

二、设置路由的首页路径,方便后续的获取

找到src目录下store\modules\permission.js文件,作如下改动:

  1. 声明
    在这里插入图片描述
,
    indexPage: '',
  1. 赋值
    在这里插入图片描述
  SET_INDEX_PAGE: (state, routes) => {
      state.indexPage = routes
    }

  1. 获取默认路由的路径
    在这里插入图片描述
getRouters().then(res => {
  const sdata = JSON.parse(JSON.stringify(res.data))
  const rdata = JSON.parse(JSON.stringify(res.data))

  let indexdata = res.data[0].path + "/" + res.data[0].children[0].path
  if (res.data[0].children[0].query !== undefined) { //如果当前路由存在路由参数,则带入
    let query = JSON.parse(res.data[0].children[0].query);
    let temp = '';
    for (var val in query) {
      if (temp.length == 0) {
        temp = "?";
      } else {
        temp = temp + "&";
      }
      temp = temp + val + "=" + query[val];
    }
    indexdata = indexdata + temp;
  }


  const sidebarRoutes = filterAsyncRouter(sdata)
  const rewriteRoutes = filterAsyncRouter(rdata, false, true)
  const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
  rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
  router.addRoutes(asyncRoutes);
  commit('SET_ROUTES', rewriteRoutes)
  commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
  commit('SET_DEFAULT_ROUTES', sidebarRoutes)
  commit('SET_TOPBAR_ROUTES', sidebarRoutes)
  commit('SET_INDEX_PAGE', indexdata)
  resolve(rewriteRoutes)
})

三、点击若依的logo跳转的页面的修改

找到src目录下src\layout\components\Sidebar\logo.vue文件,作如下改动:
在这里插入图片描述

<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" :to="indexPage">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" :to="indexPage">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
      </router-link>

在这里插入图片描述

import {mapState} from 'vuex'

...mapState({
 indexPage: state => state.permission.indexPage
})

四、关闭所有tagview后,会展示默认页面,设置禁止关闭首界面

找到src目录下src\layout\components\TagsView\index.vue文件,作如下改动:
在这里插入图片描述

import {mapState} from 'vuex'
...mapState({
  indexPage: state => state.permission.indexPage
})

在这里插入图片描述

      if (tag.fullPath == this.indexPage) {
        return true
      } else {
        return tag.meta && tag.meta.affix
      }

在这里插入图片描述

this.$router.push(this.indexPage)

五、个人中心关闭按钮后跳转的页面,防止点击关闭后页面空掉

找到src目录下src\plugns\tab.js文件,作如下改动:
在这里插入图片描述

 let indexPage = store.state.permission.indexPage;
    if (obj === undefined) {
      return store.dispatch('tagsView/delView', router.currentRoute).then(({ lastPath }) => {
        return router.push(lastPath || indexPage);
      });
    }

六、隐藏掉若依原本导航中的首页

找到src目录下src\components\BredCrumb\index.vue文件,作如下改动:
在这里插入图片描述

七、401和404页面返回首页,返回至默认首页

找到src目录下src\views\error\401.vue和404文件,作如下改动:
在这里插入图片描述

<ul class="list-unstyled">
          <li class="link-type">
            <router-link :to="indexPage">
              回首页
            </router-link>
          </li>
</ul>
import {mapState} from "vuex";
, computed: {
    ...mapState({
      indexPage: state => state.permission.indexPage
})

八、屏蔽首页

找到src目录下src\router\index.js文件,作如下改动:
在这里插入图片描述

九、重新登陆页面修改

找到src目录下src\utils\request.js文件,作如下改动:
在这里插入图片描述

let indexurl = this.$store.state.permission.indexPage
location.href = indexurl;

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

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

相关文章

字符串函数(4)--strtok函数和strerror函数

1.strtok函数 — 分割字符串函数 2.strerror函数 — 错误报告函数 1.strstok函数的用法 char* strtok(char* str, const char* delimiters);直接看函数的声明&#xff1a; 参数1&#xff1a;要切割的地址&#xff0c;参数2&#xff1a;切割时的标记物 注意&#xff1a;strt…

单链表的python实现

首先说下线性表&#xff0c;线性表是一种最基本&#xff0c;最简单的数据结构&#xff0c;通俗点讲就是一维的存储数据的结构。 线性表分为顺序表和链接表&#xff1a; 顺序表示指的是用一组地址连续的存储单元依次存储线性表的数据元素&#xff0c;称为线性表的顺序存储结构或…

Nginx安装配置及vue项目部署【Centos7】

Background 网上好多都是源码安装&#xff0c;各种编译环境安装配置&#xff0c;感觉太麻烦了&#xff0c;这里直接下载一个rpm包就行了&#xff0c;离线安装也方便。 1、nginx rpm包下载 选择你要使用的版本下载。 nginx官方下载地址&#xff1a;http://nginx.org/packages/ce…

垃圾回收机制

1.什么场景下该使用什么垃圾回收策略&#xff1f; (1).对内存要求苛刻的场景 想办法提高对象的回收效率&#xff0c;尽可能的多回收一些对象&#xff0c;腾出更多内存 (2).在CPU使用率较高的情况下 降低高并发时垃圾回收频率&#xff0c;让CPU更多地去执行业务而不是垃圾回收 …

一文搞懂 Redis 架构演化之路

现如今 Redis 变得越来越流行&#xff0c;几乎在很多项目中都要被用到&#xff0c;不知道你在使用 Redis 时&#xff0c;有没有思考过&#xff0c;Redis 到底是如何稳定、高性能地提供服务的&#xff1f; 我使用 Redis 的场景很简单&#xff0c;只使用单机版 Redis 会有什么问…

vite + react +typescript 环境搭建,小白入门级教程

目录前言1. 使用 vite 创建 react 项目1. npm / yarn 命令初始化2. 输入项目名称3. 选择框架4. 选择 Js / Ts5. 项目创建完成6. 启动项目2. 规范项目目录3. 使用 react-router-dom 路由1. 使用 npm / yarn 命令下载2. 更改 react-router-dom 版本1. 通过 npm 命令降低版本2. 手…

rabbitmq基础5——集群节点类型、集群节点基础运维,集群管理命令,API接口工具

文章目录一、集群节点类型1.1 内存节点1.2 磁盘节点二、集群基础运维2.1 剔除单个节点2.1.1 集群正常踢出正常节点2.1.2 服务器异常宕机踢出节点2.1.3 集群正常重置并踢出节点2.2 集群节点版本升级2.3 集群某单节点故障恢复2.3.1 机器硬件故障2.3.2 机器掉电2.3.3 网络故障2.3.…

Android ShapeableImageView使用

ShapeableImageView使用使用 导包 implementation com.google.android.material:material:1.4.0属性 属性描述shapeAppearance样式shapeAppearanceOverlay样式&#xff0c;叠加层strokeWidth描边宽度strokeColor描边颜色 样式 名称属性值描述cornerFamilyrounded圆角cut裁剪…

学习记录-mybatis+vue+elementUi实现品牌查询

和以往不同的是&#xff0c;这一次使用了vue和axios来接收后端传过来的参数&#xff0c;并且新建了impl文件来继承service层的接口。该过程实现一共分为4步骤 步骤一 ①mapper mapper 写mapper接口 其实就是写SQL语句了&#xff0c;第一步就是写SQL。这里使用的是注解开发&…

程序员危机如何化解?

很多人认为程序员一定要干到管理层&#xff0c;才会有继续走下去的希望&#xff0c;而踏实做技术的程序员&#xff0c;只会面临淘汰。事实真是如此吗&#xff1f; △ 截图来源脉脉&#xff0c;如侵删 先不说结论&#xff0c;我们一起先看看网友们的看法&#xff1a; △ 截…

报表控件Stimulsoft v2023.1全新发布 | 附免费下载试用

Stimulsoft Ultimate 宣布发布新版本2023.1&#xff01;在最新版本中添加了对Razor Pages的支持、新的数据监视器可视化工具、为PHP和Blazor平台更新了组件,欢迎下载试用&#xff01; Stimulsoft Ultimate官方正版下载 Razor Pages 在 2023.1.1 版中&#xff0c;我们添加了对…

跨域问题以及解决跨域问题的vue-cli解决方案

跨域问题 写项目前要问后端,接口支持跨域吗? 支持就不会出现问题,不支持就需要解决跨域问题 1.如何判断一个浏览器的请求是否跨域&#xff1f; 在A地址&#xff08;发起请求的页面地址&#xff09;向B地址&#xff08;要请求的目标页面地址&#xff09;发起请求时&#xff…

【JavaEE】多线程(三)线程的状态

✨哈喽&#xff0c;进来的小伙伴们&#xff0c;你们好耶&#xff01;✨ &#x1f6f0;️&#x1f6f0;️系列专栏:【JavaEE】 ✈️✈️本篇内容:线程的状态&#xff0c;线程安全问题&#xff01; &#x1f680;&#x1f680;代码存放仓库gitee&#xff1a;JavaEE初阶代码存放&a…

抗癌药物之多肽药物偶联物技术(PDC)介绍

长期以来&#xff0c;心血管疾病是全球中年人死亡的主要原因。这种情况最近在高收入国家发生了变化&#xff0c;现在癌症导致的死亡人数是心血管疾病的两倍。2018 年&#xff0c;癌症导致全球 960 万人死亡&#xff0c;1810 万新病例被诊断出来。女性最常发生的癌症是乳腺癌&am…

12Python继承与多态

继承 面向对象三大特性 封装 根据 职责 将 属性 和 方法 封装 到一个抽象的 类 中继承 实现代码的重用&#xff0c;相同的代码不需要重复的编写多态 不同的对象调用相同的方法&#xff0c;产生不同的执行结果&#xff0c;增加代码的灵活度 1继承的概念、语法和特点 继承的概…

奖项快报 | ALVA Systems 上榜 《2022 高成长企业 TOP100》!

近日&#xff0c;《2022 高成长企业 TOP 100》榜单发布&#xff0c;凭借卓越的创新能力与在工业 AR 领域的赋能价值&#xff0c;ALVA Systems 在2022年度高成长企业TOP100大赛活动中脱颖而出&#xff0c;成功入选榜单。 *ALVA Systems 入选榜单 创新驱动&#xff0c;赋能数字经…

【ARM -- stm32 汇编代码点亮LED灯】

ARM -- stm32 汇编代码点亮LED灯实现过程查询开发手册分析RCC章节分析GPIO章节编写代码实现过程 查询开发手册 分析RCC章节 一、确定RCC基地址 二、分析RCC_MP_AHB4ENSETR寄存器 1、RCC_MP_AHB4ENSETR寄存器的功能是使能GPIO组相关控制器&#xff1b; 2、RCC_MP_AHB4ENSET…

07第四章:01_常用注解

常用注解 1、Table 作用&#xff1a;建立实体类和数据库表之间的对应关系。 默认规则&#xff1a;实体类类名首字母小写作为表名&#xff0c;如 Employee -> employee 表 用法&#xff1a;在 Table 注解的 name 属性中指定目标数据库的表名&#xff1b; 案例&#xff1…

WPF依赖属性、附加属性、属性继承、类型转换详解

依赖属性 依赖属性回调方法与参数 具有依赖属性的类必须继承自DependencyObject&#xff0c;定义依赖属性要有2个步骤 //1属性包装器&#xff0c;目的是为了向正常属性一样使用依赖属性 public int Name {get { return (int)GetValue(NameProperty); }set { SetValue(NamePr…

国家“数据安全三认证”图解来了

二十大指引新时代新征程。蓝图已经绘就&#xff0c;号角已经吹响&#xff0c;新征程是充满光荣和梦想的远征。二十大报告深刻阐明了实现中华民族伟大复兴的一系列重大问题&#xff0c;系统擘画了以中国式现代化推进民族复兴的宏伟蓝图&#xff0c;是引领中华民族伟大复兴的政治…