若依前后端分离框架:去掉默认首页登录后跳转至动态路由的第一个路由
·
偌依参考解决链接
本文部分代码跟该链接不太一样,微调
若依框架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;
更多推荐




所有评论(0)