若依系統(tǒng)是一個很好用的，開源的前端后臺管理系統(tǒng)。

最近公司有一個需求，需要把默認的首頁隱藏，登錄后直接跳轉(zhuǎn)到路由菜單返回的第一個頁面。

查找了不少資料，但是都沒有實際的解決方案。

?不過最好自己還是實現(xiàn)了這個功能。

步驟如下：

1、首先應當找到項目里面，指定跳轉(zhuǎn)到之前默認首頁的路由。即'/index'

2、項目里面找到了幾處，頁面路徑如下：

src/permission.js
src/store/permission.js
src/router/index.js
src/utils/request.js
src/system/user/profile/resetPwd.vue
src/system/user/profile/userInfo.vue
src/layout/components/Topbar.vue

1)? src/permission.js 需要修改的地方，

當?shù)卿浿?，token的情況：

1.1) 這里? to.path=== '/login'?? 判斷，當?shù)卿浿螅阆胩降卿涰?。那系統(tǒng)會跳到路由接口的第一個路由地址indexPage，因為你已經(jīng)登錄了，系統(tǒng)不會給你跳到登錄頁，除非你點擊退出登錄。

1.2) 這里? to.fullPath == '/'? 判斷，當?shù)卿浿?，直接通過ip地址和端口號訪問時，跳轉(zhuǎn)到第一個路由頁面indexPage。如：http://10.12.7.76:6090/，這樣直接訪問。

1.3） 這個 to.fullPath == '/'? 判斷后面的else，是為了處理兩個問題

??? 1.3.1） 如果是點擊了一個菜單，然后點擊刷新，需要保持在當前的頁面。

??? 1.3.2） 如果在當前頁面點擊一個按鈕，通過打開新窗口跳轉(zhuǎn)路由到另一個頁面。如從當前故障報警詳情里跳到實時監(jiān)控頁面。（ps:如果不這么做，你跳轉(zhuǎn)去的頁面會變成路由默認的第一個頁面)。

沒有登錄，沒有token的情況：?

1.4)??

// 沒有token

? ? if (whiteList.indexOf(to.path) !== -1) {

? ? ? // 在免登錄白名單，直接進入

? ? ? next()

? ? } else {

? ? ? next(`/login?redirect=${to.fullPath}`) // 否則全部重定向到登錄頁。

? ? ? // 但to.fullPath有可能為%2F，即http://172.16.6.205:9090/login?redirect=%2F，不帶任何跳轉(zhuǎn)路由。這時候，請看下文中 login.vue 的跳轉(zhuǎn)方法。

? ? ? NProgress.done()

? ? }

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    // 登錄之后，訪問路由會執(zhí)行這個方法。
    /* has token*/
    // 已經(jīng)登錄了，但你想跳到登錄頁。那系統(tǒng)會跳到路由接口的第一個路由地址，不會給你跳到登錄頁，除非你點擊退出登錄。
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        // 判斷當前用戶是否已拉取完user_info信息
        store.dispatch('GetInfo').then(res => {
          // 拉取user_info
          const roles = res.roles
          store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => {
            // 根據(jù)roles權(quán)限生成可訪問的路由表
            // 修改默認首頁
            // console.log(accessRoutes, from, to.fullPath)
            router.addRoutes(accessRoutes) // 動態(tài)添加可訪問路由表
            if (to.fullPath == '/') {
              // 當?shù)卿浿?，直接通過ip地址和端口號訪問時，跳轉(zhuǎn)到第一個路由頁面indexPage。如：http://10.12.7.76:6090/，這樣直接訪問。
              let pathIndex = ''
              pathIndex = accessRoutes[0].path + '/' + accessRoutes[0].children[0].path
              // replace: true只是一個設置信息，告訴VUE本次操作后，不能通過瀏覽器后退按鈕，返回前一個路由。
              next({ path: pathIndex, replace: true }) // hack方法 確保addRoutes已完成
            } else {
              // 如果是點擊了一個菜單，然后刷新，保持在當前的頁面。
              // 如果是從其他頁面點擊，通過打開新窗口跳轉(zhuǎn)路由。如從當前故障報警詳情里跳到實時監(jiān)控頁面。
              next({ ...to, replace: true }) // hack方法 確保addRoutes已完成
              // 使用next({ ...to, replace: true })來確保addRoutes()時動態(tài)添加的路由已經(jīng)被完全加載上去。
            }
            // 修改默認首頁end
          })
        })
        .catch(err => {
          store.dispatch('LogOut').then(() => {
            Message.error(err)
            next({ path: '/login' })
          })
        })
      } else {
        // 跳轉(zhuǎn)到對應的頁面
        next()
      }
    }
  } else {
    // 沒有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登錄白名單，直接進入
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否則全部重定向到登錄頁。
      // 但to.fullPath有可能為%2F，即http://172.16.6.205:9090/login?redirect=%2F，不帶任何跳轉(zhuǎn)路由。這時候，請看login.vue的跳轉(zhuǎn)方法。
      NProgress.done()
    }
  }
})

2） src/store/permission.js 需要修改的地方

3）? src/router/index.js? 需要把首頁注釋

4） src/utils/request.js? 需要修改的地方

5） src/system/user/profile/resetPwd.vue 和 src/system/user/profile/userInfo.vue

6） src/layout/components/Topbar.vue

3、針對? login.vue? 做出相應的修改。這里也很重要。

 this.$store.dispatch('Login', params).then(() => {
              // 1、跳到登錄后指定跳轉(zhuǎn)的頁面或者登錄后跳到首頁
              // this.$router.push({ path: this.redirect || '/' }).catch(() => {})
              // 2、登錄后跳到路由默認的第一個路由頁面
              this.$store.dispatch('GetInfo').then(res => {
                // 拉取完user_info信息
                const roles = res.roles
                this.$store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => {
                  // 根據(jù)roles權(quán)限生成可訪問的路由表
                  // console.log(accessRoutes, from, to.fullPath)
                  this.$router.addRoutes(accessRoutes) // 動態(tài)添加可訪問路由表
                  let pathIndex = ''
                  pathIndex = accessRoutes[0].path + '/' + accessRoutes[0].children[0].path // 設置默認首頁地址indexPage
                  // console.log(this.redirect, pathIndex)
                  // 1、this.redirect == undefined,主要針對直接從http://172.16.6.205:9090/login，登入系統(tǒng)。
                  // 2、this.redirect == '/'，主要針對直接從這個http://172.16.6.205:9090/login?redirect=%2F，登入系統(tǒng)。因為沒有設置重定向的路由
                  // 如果登錄的時候出現(xiàn)1、2兩種情況，那么就跳到路由的第一個路由頁面，如果登錄的時候，有設置可以訪問的重定向地址，那么登錄后就跳到重定向地址。
                  if (pathIndex != '') {
                    this.$router.push({ path: this.redirect == '/' || this.redirect == undefined ? pathIndex : this.redirect }).catch(() => {}) // 跳轉(zhuǎn)重定向頁面或跳到默認首頁indexPage
                  }
                })
              })
              .catch(err => {
                this.$store.dispatch('LogOut').then(() => {
                  Message.error(err)
                  next({ path: '/login' })
                })
              })
            })
            .catch(error => {
              this.errorMsg = error
              this.loading = false
              this.getCode()
            })
        

3.1）沒有token，在登錄頁面登錄，會先執(zhí)行這個登錄方法。

? ? ? ? ? this.$store.dispatch('Login', params).then(() => {}）

3.3.1）訪問登錄頁面，調(diào)起獲取路由接口獲取到路由數(shù)據(jù)后，然后判斷是否有設置重定向的路由地址。

a、this.redirect == undefined,主要針對直接從http://172.16.6.205:9090/login，登入系統(tǒng)。

b、this.redirect == '/'，主要針對直接從這個http://172.16.6.205:9090/login?redirect=%2F，登入系統(tǒng)。因為沒有設置重定向的路由

如果登錄的時候，出現(xiàn)a、b兩種情況，那么就跳到路由的第一個路由頁面;

如果登錄的時候，有設置可以訪問的重定向地址，那么登錄后就跳到重定向地址。

?if (pathIndex != '') {

? ? ? this.$router.push({ path: this.redirect == '/' || this.redirect == undefined ? pathIndex : this.redirect }).catch(() => {}) // 跳轉(zhuǎn)重定向頁面或跳到默認首頁indexPage

}文章來源地址http://www.zghlxwxcb.cn/news/detail-406023.html

到了這里，關于若依：如何去掉首頁，設置登錄后跳轉(zhuǎn)到第一個路由菜單的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！