偌依参考解决链接
本文部分代码跟该链接不太一样,微调

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

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

找到src目录下src\permission.js文件,改动如下(如果存在路由参数,则带入):

改动的代码:

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
import { isRelogin } from '@/utils/request'

NProgress.configure({ showSpinner: false })

const whiteList = ['/login', '/register']

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      if (store.getters.roles.length === 0) {
        isRelogin.show = true
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(() => {
          isRelogin.show = false
          store.dispatch('GenerateRoutes').then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
            // next({ ...to, replace: true }) // hack方法确保addRoutes已完成,这是原来的方法,现在注释掉,下边就是现在改动的代码
            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}) 
            } else {
              next(temp)
            }
          })
        }).catch(err => {
            store.dispatch('LogOut').then(() => {
              Message.error(err)
              next({ path: '/' })
            })
          })
      } else {
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单,直接进入
      next()
    } else {
      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)     // 否则全部重定向到登录页
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})

改动代码的截图
在这里插入图片描述

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

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

1.声明:

添加 indexPage:’ ’在这里插入图片描述

2.赋值:

在这里插入图片描述

代码

   SET_INDEX_PAGE: (state, routes) => {
      state.indexPage = routes;
    },
3.获取默认路由的路径

在这里插入图片描述

在这里插入图片描述

代码(改动位置有标注):

  GenerateRoutes({ commit }) {
      return new Promise((resolve) => {
        // 向后端请求路由数据
        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文件,改动如下:
在这里插入图片描述

代码:

 <transition name="sidebarLogoFade">
      <div v-if="collapse" key="collapse" class="sidebar-logo-link" to="/indexPage">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
      </div>
      <div 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> -->
      </div>
    </transition>

在这里插入图片描述

代码:

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,
    }),

改动截图
在这里插入图片描述
代码:

 isAffix(tag) {
      // return tag.meta && tag.meta.affix;
    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(({ visitedViews }) => {
        const latestView = visitedViews.slice(-1)[0]
        if (latestView) {
          // return router.push(latestView.fullPath)
          return router.push(latestView || indexPage);
        }
        return router.push('/');
      });
    }

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

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

代码:

 getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]
      // if (!this.isDashboard(first)) {
      //   matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
      // }
      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },

七、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;
Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐