Vue?router應用問題怎么解決

這篇文章主要講解了“Vue router應用問題怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue router應用問題怎么解決”吧！

問題記錄

路由守衛的應用

根據路由守衛綁定的位置不同，有下面三種路由守衛

全局守衛

beforeEach/beforeResolve/afterEach

路由獨享守衛

beforeEnter

組件內的守衛

beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave

其完整的導航解析過程，看官方文檔的說明是這樣的：

導航被觸發。

在失活的組件里調用 beforeRouteLeave 守衛。

調用全局的 beforeEach 守衛。

在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。

在路由配置里調用 beforeEnter。

解析異步路由組件。

在被激活的組件里調用 beforeRouteEnter。

調用全局的 beforeResolve 守衛 (2.5+)。

導航被確認。

調用全局的 afterEach 鉤子。

觸發 DOM 更新。

用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

下面是幾個常用鉤子的實際應用場景：

beforeRouteLeave：跳轉頁面前，提醒用戶，是否保存信息，或者自動為用戶保存草稿。

beforeEach：判斷是否登錄、是否有權限等等，做跳轉登錄、申請權限、處理權限菜單等操作。

beforeRouteUpdate：重新進入相同頁面時，重新初始化、加載數據。

beforeRouteEnter：獲取當前頁面的前一個頁面的信息，比如我們在登錄頁，登錄后要重定向到前一個頁面，就可以通過這個鉤子獲取。注意：這里， 不！能！獲取組件實例 this，因為新組件還沒有被創建。不過，可以傳一個回調，給next來訪問實例，在創建好實例后，會執行。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問組件實例
  })
}

其他幾個路由守衛，我這邊不常用，有補充的觀眾歡迎留下評論。

動態路由實現權限控制

應用場景：管理端根據不同權限，需要展示不同的菜單欄，同時希望沒有權限的用戶無法訪問某些頁面。

解決方案：我們在進入路由前，做一個攔截，先判斷是否需要處理頁面權限，再判斷是否已經處理了權限，如果回答都是“是”，我們不需要做處理。否則，請求接口，獲取到當前用戶的權限菜單，再根據后臺返回的信息，給router動態添加路由，再重新進入路由（避免攔截的訪問是新添加的路由，出現訪問不到的問題）。

具體看下面的偽代碼：

router.beforeEach((to, from, next) => {
    if (needAuthority(to.name)) {  //不需要判斷權限的頁面，不處理
      next()
      return
    } 
    if (alreadyGetAuthorityMenu) {  //已經處理過權限菜單，不再處理
        next()
        return
    }
  
    handleAuthority().then(()=>{
        next({ ...to, replace: true })  //處理權限菜單接口成功，動態路由已經添加了，重新進入路由
      }).catch(() => {
        console.log('請求權限菜單接口錯誤')
        next()
    })
})

在handleAuthority中我們做了這些事情

• 判斷是否有權限，沒有權限的用戶，跳轉到權限申請頁面

• 根據后臺傳過來的權限列表，用router.addRoutes(routes: Array)這個API，給router動態添加需要權限控制的頁面對應的路由。

• 給router動態添加一個兜底頁面，可以是提示沒權限的頁面，或者簡單一個404頁面。

需要注意的是，動態添加路由后，需要next({ ...to, replace: true })重新進入路由，否則，如果攔截的頁面路由，是你后面才添加的路由，那新的路由會訪問不到。

hash模式的路由參數被干擾

應用場景：比如微信分享鏈接會加上，類似'?from=singlemessage&isappinstalled=0'這類的參數，當我們使用hash模式路由，同時使用params的方式傳參數的時候，常常會被外界的參數干擾到，導致頁面無法訪問或者參數獲取不到，使用動態路由參數是更好的選擇。

const router = new VueRouter({
  routes: [
    // 動態路徑參數 以冒號開頭
    { path: '/user/:id', component: User }
  ]
})
const userId = '123'
// 兩種跳轉方式
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

更進一步，我們可以使用props，將組件和路由解耦，在組件中定義id這個props，就能拿到傳遞的參數。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true }
  ]
})

跳轉同組件路由，不刷新？

應用場景：跳轉同個組件的頁面，但是參數不同，期望重新刷新頁面。

解決方案：我們可以在beforeRouteUpdate中，重新執行進入頁面要執行的代碼，但如果需要初始化所有變量，難免有遺漏，更簡單的方式是，監聽route變化，有變化是 this.$router.go(0)刷新。

// 推薦
beforeRouteUpdate(to, from, next) {
    // 重新加載數據
    next();
},

watch: {
 '$route'(to, from) {
    this.$router.go(0)
 }
}

感謝各位的閱讀，以上就是“Vue router應用問題怎么解決”的內容了，經過本文的學習后，相信大家對Vue router應用問題怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！