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

该博客介绍了若依Vue前端框架中登录后如何默认跳转到动态路由的第一个子菜单,包括修改`permission.js`实现跳转、设置首页路径、调整Logo跳转、TagView关闭逻辑、个人中心跳转、隐藏首页导航、401/404页面处理以及重新登录页面的修改等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

找到src目录下permission.js文件,作如下改动(如果存在路由参数,则带入):
注意:2023年6月12日09:47:19 修改bug,登录成功之后,再次访问localhost或者首页地址会跳转到404错误页的问题。下面代码已经更新了,但是图片没有更新。
在这里插入图片描述

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文件,作如下改动:

  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 = store.state.permission.indexPage
location.href = indexurl;

为了防止有的童鞋没敲对导致404
我把我改的项目上传了
项目下载

### PbootCMS 后台登录失败解决方案 #### 验证码未显示问题 对于PbootCMS后台登录界面不显示验证码的情况,通常是因为环境配置或插件冲突引起的。特别是当使用阿里云虚拟主机时,可能由于某些特定的安全策略或服务器设置影响了验证码图片的加载[^1]。 #### 页面空白问题 针对后台登录后页面呈现为空白的现象,这往往涉及到脚本执行错误或是文件权限不当等问题。具体来说: - **PHP版本兼容性**:确认当前使用的PHP版本与PbootCMS的要求相匹配。 - **文件权限**:检查并调整相关目录及文件的读写权限,确保程序能顺利读取所需资源。 - **日志记录**:查看服务器端的日志文件(如`error_log`),从中寻找任何潜在的报错信息以便进一步诊断[^2]。 #### 网络连接与安全防护干扰 考虑到网络状况不佳同样会影响系统的正常使用,比如因防火墙规则过于严格而阻碍了必要的HTTP请求响应循环;或者是安装的安全软件误判阻止了一些合法的操作行为。因此建议临时关闭这些保护措施来进行对比测试,判断其是否为造成故障的因素之一[^3]。 #### 跨域资源共享(CORS) 设置 如果应用涉及到了前后端分离架构,则需注意跨域访问控制机制的影响。通过适当修改Web应用程序中的CORS策略来允许来自不同源的数据交互,可有效规避此类障碍。例如利用Nginx作为反向代理服务器实施相应的转发逻辑处理[^5]。 综上所述,要彻底解决PbootCMS后台登录遇到的各种难题,可以从上述几个方面逐一排查直至找到根本原因所在,并采取针对性措施加以修复优化。 ```bash # 查看php版本命令 php -v ``` ```bash # 修改文件夹权限命令 (Linux/Unix) chmod -R 755 /path/to/pbootcms/directory ```
评论 55
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值