最近碰到的需求是登錄進(jìn)入后,先跳轉(zhuǎn)至一個(gè)自己定義的頁(yè)面,在這個(gè)頁(yè)面選擇一個(gè)系統(tǒng)后,進(jìn)入若依的系統(tǒng),根據(jù)選擇的系統(tǒng)獲取相應(yīng)的菜單,進(jìn)入頁(yè)面后默認(rèn)跳轉(zhuǎn)至后端返回的動(dòng)態(tài)路由的第一個(gè)路由
1.首先在登錄頁(yè)面login.vue做如下改動(dòng)
寫成你要跳轉(zhuǎn)過(guò)去的頁(yè)面:(這個(gè)路由如果是自己定義的,要記得在router文件夾下聲明一下路由)
在你自定義的頁(yè)面內(nèi),把原本寫在登錄頁(yè)面跳轉(zhuǎn)的路由,寫到你在自定義頁(yè)面要跳轉(zhuǎn)的地方,這個(gè)地方我沒(méi)有寫原本的redirect,不知道有沒(méi)有影響.
這樣在你登錄后,頁(yè)面就不會(huì)按照之前默認(rèn)的跳到系統(tǒng)首頁(yè)了,而是會(huì)跳轉(zhuǎn)至你定義的路由;
?2.找到src目錄下permission.js文件,作如下改動(dòng):
這里主要設(shè)置的就是跳轉(zhuǎn)至自定義頁(yè)面,設(shè)置跳轉(zhuǎn)的默認(rèn)首頁(yè).
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') {
// 意思是如果你已經(jīng)登錄了,而且現(xiàn)在還可以獲取到token即登錄沒(méi)有過(guò)期,你要去登錄頁(yè)的話是去不了的,
// 但是去其他頁(yè)面是放行的,去其他頁(yè)面就會(huì)走下面的else。
// 登錄后不可再返回至登錄頁(yè),此處next不放行
next({ path: '/' })
NProgress.done()
} else {
if (from.path === '/login') {
// 如果是從登錄頁(yè)過(guò)來(lái),就直接放行到要去的路由,什么都不做
// 在這里只有一種可能性,就是從/login來(lái),去/channel路由,即跳轉(zhuǎn)至自定義頁(yè)面,在這里因?yàn)槭? //么都沒(méi)做,所以目前為止,還沒(méi)有獲取到系統(tǒng)的菜單
next();
return;
}
// 我看了下這里只有登錄后跳轉(zhuǎn)的時(shí)候以及刷新系統(tǒng)頁(yè)面的時(shí)候會(huì)進(jìn)來(lái),
// 在我們跳轉(zhuǎn)自定義頁(yè)面的時(shí)候并不會(huì)進(jìn)來(lái),走的是上面的if,
// 只有從自定義頁(yè)面往其他頁(yè)面跳轉(zhuǎn)的時(shí)候才會(huì)走這里
if (store.getters.roles.length === 0) {
isRelogin.show = true
// 判斷當(dāng)前用戶是否已拉取完user_info信息
store.dispatch('GetInfo').then(() => {
isRelogin.show = false
// 確認(rèn)當(dāng)前已經(jīng)登錄了,能獲取到登錄的用戶信息
// 進(jìn)入到這里的時(shí)候,我已經(jīng)選擇了自己接下來(lái)要進(jìn)入的系統(tǒng),要把系統(tǒng)的
// 標(biāo)志id先存起來(lái),然后獲取菜單的時(shí)候傳過(guò)去
let systemId=sessionStorage.getItem("systemId");
store.dispatch('GenerateRoutes',{systemId}).then(accessRoutes => {
// 根據(jù)roles權(quán)限生成可訪問(wèn)的路由表
router.addRoutes(accessRoutes) // 動(dòng)態(tài)添加可訪問(wèn)路由表
// 接下來(lái)是設(shè)置默認(rèn)跳轉(zhuǎn)的頁(yè)面
let path="";
// 設(shè)置動(dòng)態(tài)路由的第一個(gè)路由為跳轉(zhuǎn)的默認(rèn)頁(yè)面
path=accessRoutes[0].path+"/"+accessRoutes[0].children[0].path;
if(from.path=="/channel"){
// 如果是從自定義頁(yè)面跳轉(zhuǎn)過(guò)去,就跳轉(zhuǎn)至動(dòng)態(tài)路由的第一個(gè)路由
next({path,replace:true})
}else{
// 如果是點(diǎn)擊了一個(gè)菜單,然后刷新的頁(yè)面,就保持在當(dāng)前的頁(yè)面,防止刷新后跳轉(zhuǎn)到了自己定義的頁(yè)面
next({ ...to, replace: true }) // hack方法 確保addRoutes已完成
}
})
}).catch(err => {
store.dispatch('LogOut').then(() => {
Message.error(err)
next({ path: '/' })
})
})
} else {
next()
}
}
} else {
// 沒(méi)有token
if (whiteList.indexOf(to.path) !== -1) {
// 在免登錄白名單，直接進(jìn)入
next()
} else {
next(`/login?redirect=${to.fullPath}`) // 否則全部重定向到登錄頁(yè)
NProgress.done()
}
}
})3.在store文件夾下找到permission.js文件,作如下變動(dòng):
這里主要設(shè)置的就是獲取路由的時(shí)候根據(jù)傳遞的參數(shù)獲取相應(yīng)的路由菜單,以及默認(rèn)首頁(yè)的設(shè)置.
state: {
routes: [],
addRoutes: [],
defaultRoutes: [],
topbarRouters: [],
sidebarRouters: [],
indexPage:"",// 修改跳轉(zhuǎn)首頁(yè)
},
mutations: {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
},
SET_DEFAULT_ROUTES: (state, routes) => {
state.defaultRoutes = constantRoutes.concat(routes)
},
SET_TOPBAR_ROUTES: (state, routes) => {
state.topbarRouters = routes
},
SET_SIDEBAR_ROUTERS: (state, routes) => {
state.sidebarRouters = routes
},
SET_INDEX_PAGE:(state,routes)=>{
state.indexPage=routes
}
},
actions: {
// 生成路由
GenerateRoutes({ commit }, param) {
return new Promise(resolve => {
// 向后端請(qǐng)求路由數(shù)據(jù)
getRouters({ menuFlag: param.systemId }).then(res => {
const sdata = JSON.parse(JSON.stringify(res.data))
const rdata = JSON.parse(JSON.stringify(res.data))
const firstPage=res.data[0].path+"/"+res.data[0].children[0].path;
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',firstPage)
resolve(rewriteRoutes)
})
})
}
}4.找到src/layout/components/Sidebar/logo.vue文件,作如下改動(dòng):
這里主要設(shè)置的就是進(jìn)入系統(tǒng)后點(diǎn)擊若依的logo跳轉(zhuǎn)的頁(yè)面,改成我們?cè)O(shè)置的默認(rèn)首頁(yè).?
?5.找到src/layout/components/TagsView/index.vue,作如下改動(dòng):
這里主要設(shè)置的是關(guān)閉所有tagview后,會(huì)展示默認(rèn)頁(yè)面,防止關(guān)閉所有的tagview后頁(yè)面空掉,不然太不美觀.
?這里設(shè)置的是當(dāng)展示的是默認(rèn)頁(yè)面時(shí),tagview是不允許關(guān)閉的,即下面的效果:
這里設(shè)置的是所有能被關(guān)閉的tagview被關(guān)閉后,會(huì)跳轉(zhuǎn)至默認(rèn)頁(yè)面.
?6.找到src/plugns/tab.js,作如下改動(dòng):
這里設(shè)置的是編輯完個(gè)人中心后點(diǎn)擊關(guān)閉后跳轉(zhuǎn)的頁(yè)面,防止點(diǎn)擊關(guān)閉后頁(yè)面空掉.
?7.找到src/components/BredCrumb/.index.vue,作如下變動(dòng):
這里設(shè)置的是隱藏掉若依原本面包屑導(dǎo)航中的首頁(yè)
?8.找到src/views/error/401.vue和404.vue,作如下改動(dòng):
這里設(shè)置的是從401和404頁(yè)面返回首頁(yè),返回至默認(rèn)首頁(yè);
?大概就是以上步驟,有遺漏的再補(bǔ)充,因?yàn)楸救藳](méi)有完全理解吃透若依的框架,而且有些地方是借鑒的別的大佬的,所以有那些說(shuō)的不清楚的地方,還請(qǐng)見(jiàn)諒.
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-788635.html
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-788635.html
?
?
?
到了這里，關(guān)于若依框架登錄后跳轉(zhuǎn)其他頁(yè)面&獲取不同的菜單&登錄進(jìn)入后跳轉(zhuǎn)至動(dòng)態(tài)路由的第一個(gè)路由的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
