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

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

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;
 var temp = {...to, replace: true};
 var curPath = temp.path;
 if (from.path == '/login' || curPath == "/" ) {
   next({path, replace: true}) // hack方法 确保addRoutes已完成
 } else {
   next(temp) // hack方法 确保addRoutes已完成
二、设置路由的首页路径，方便后续的获取
 
找到src目录下store\modules\permission.js文件,作如下改动:
 
    indexPage: '',
  SET_INDEX_PAGE: (state, routes) => {
      state.indexPage = routes
获取默认路由的路径
 
 
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>
import {mapState} from "vuex";
, computed: {
    ...mapState({
      indexPage: state => state.permission.indexPage
八、屏蔽首页
 
找到src目录下src\router\index.js文件,作如下改动:
 
 
九、重新登陆页面修改
 
找到src目录下src\utils\request.js文件,作如下改动:
 
 
let indexurl = store.state.permission.indexPage
location.href = indexurl;
为了防止有的童鞋没敲对导致404
 我把我改的项目上传了
 项目下载
                                    若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由
（第一个子菜单）
若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由
（第一个子菜单）
若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由
（第一个子菜单）
若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由
（第一个子菜单）
若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由
（第一个子菜单）
若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由
（第一个子菜单）
若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由
（第一个子菜单）
若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由
（第一个子菜单）
若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由
（第一个子菜单）
若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由
（第一个子菜单）
若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由
（第一个子菜单）
若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由
（第一个子菜单）
                                    最近项目有个需求：不同权限的用户看到的菜单不一样。那么此时就有衍生出一个问题：权限A的用户和权限B的用户，如果看到的菜单没有交集的话，那么权限A的用户登录进去应该看到哪个菜单？权限B的用户登录进去后，又应该看到哪个菜单那？当然，您也可以采用首页的方式。1、用户登录的时候，在登录成功后，我们有个默认的跳转页面。框架中，默认的是“/”。我们可以想到，能否使用权限中的第一个页面，做为用户登录后的首页面哪？那么，不管什么权限的用户，登录后的首页面就是该权限的第一个页面。我们这里的默认的路由是“/stock”。
                                    / 定义跳转逻辑的函数。// 从响应中获取角色信息。2.登录时，获取当前登录的用户信息，根据用户信息里的用户ID获得角色ID，再进行判断。case "common": // 普通用户/超级管理员跳转路径。三.前端代码修改,根据后端获得的roleInfo判断跳转的页面。default: // 默认跳转首页（如无角色信息）roleInfo) {//  没有角色信息时。让原来是resolve()变成resolve(res)case "you": // 其他角色跳转路径。// 新增：根据角色信息确定跳转路径。
                                    本文介绍了如何在若依 Vue3 前端分离框架的3.8.8版本中实现去除首页，并根据用户角色动态跳转至相应角色的第一个路由页面的功能。若依框架默认没有提供这一功能，因此需要开发者自行实现。文章详细阐述了实现过程，包括动态路由的设置以及登录后的页面跳转逻辑，旨在为需要此类功能的开发者提供指导和参考。
                                    若依系统去掉默认首页index，登录后直接跳转到路由接口菜单返回的第一个路由地址作为首页页面。该功能已经经过作者多次验证、修改和反复测试，基本没有问题的。然后这里还针对访问路由出现404的问题作出了修改。供大家参考，互相学习。
                                    若依前后端分离部署到服务器登录页一直弹窗,登录到后端一刷新页面就报404
记:在服务器上部署过几个若依框架写的程序,每次都会遇到两个问题
第一个:访问登录页的时候弹窗让重新登录就刷新重新弹窗,点取消就没了,验证码也不出来
解决方法及原因:其实也简单就是部署到服务器上后前端调用的配置文件不一样导致的访问路径错了,前端老哥告诉我把路径删了留个’/'就行
第二个是登录到后端一刷新页面就报404,前端老哥说是因为vue有一个模式叫历史模式,刷新会请求现有的路径,历史模式改掉后就会自己去找正确的路径刷新
我做的是一个小系统，不需要首页，要去掉这个首页，但是没有找到哪里可以配置是否有首页的选项；所以我自己搞了一个解决方案，可选择是否有首页，并且登录后可自动打开某页面；
步骤如下：
1、ruoyi-ui\src\components\Breadcrumb\index.vue
注释掉这段代码，因为它会在图中标红2处加...