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

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

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

找到src目录下permission.js文件,作如下改动（如果存在路由参数，则带入）:

注意：图片中存在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已完成
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.

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

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

1.声明

登录后复制

indexPage: '',

• 1.

2.赋值

登录后复制

SET_INDEX_PAGE: (state, routes) => {
state.indexPage = routes
}

• 1.
• 2.
• 3.

3.获取默认路由的路径

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.

三、点击若依的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>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

登录后复制

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

• 1.
• 2.
• 3.
• 4.

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

找到src目录下src\layout\components\TagsView\index.vue文件,作如下改动:

登录后复制

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

• 1.
• 2.
• 3.
• 4.

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.

登录后复制

this.$router.push(this.indexPage)

• 1.

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

找到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);
});
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

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

找到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>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

登录后复制

import {mapState} from "vuex";
, computed: {
...mapState({
indexPage: state => state.permission.indexPage
})

• 1.
• 2.
• 3.
• 4.
• 5.

八、屏蔽首页

找到src目录下src\router\index.js文件,作如下改动:

九、重新登陆页面修改

找到src目录下src\utils\request.js文件,作如下改动:

登录后复制

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

• 1.
• 2.

原创作者: u_15978456 转载于: https://blog.51cto.com/u_15978456/11298109