前言

本文記錄vue2的vue-router在使用過程中遇到的一些問題。

問題記錄

路由守衛(wèi)的應(yīng)用

根據(jù)路由守衛(wèi)綁定的位置不同，有下面三種路由守衛(wèi)

全局守衛(wèi)

beforeEach/beforeResolve/afterEach

路由獨享守衛(wèi)

beforeEnter

組件內(nèi)的守衛(wèi)

beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave

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

導(dǎo)航被觸發(fā)。

在失活的組件里調(diào)用 beforeRouteLeave 守衛(wèi)。

調(diào)用全局的 beforeEach 守衛(wèi)。

在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。

在路由配置里調(diào)用 beforeEnter。

解析異步路由組件。

在被激活的組件里調(diào)用 beforeRouteEnter。

調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。

導(dǎo)航被確認(rèn)。

調(diào)用全局的 afterEach 鉤子。

觸發(fā) DOM 更新。

用創(chuàng)建好的實例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。

下面是幾個常用鉤子的實際應(yīng)用場景：

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

beforeEach：判斷是否登錄、是否有權(quán)限等等，做跳轉(zhuǎn)登錄、申請權(quán)限、處理權(quán)限菜單等操作。

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

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

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

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

動態(tài)路由實現(xiàn)權(quán)限控制

應(yīng)用場景：管理端根據(jù)不同權(quán)限，需要展示不同的菜單欄，同時希望沒有權(quán)限的用戶無法訪問某些頁面。

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

具體看下面的偽代碼：

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

在handleAuthority中我們做了這些事情

• 判斷是否有權(quán)限，沒有權(quán)限的用戶，跳轉(zhuǎn)到權(quán)限申請頁面
• 根據(jù)后臺傳過來的權(quán)限列表，用router.addRoutes(routes: Array)這個API，給router動態(tài)添加需要權(quán)限控制的頁面對應(yīng)的路由。
• 給router動態(tài)添加一個兜底頁面，可以是提示沒權(quán)限的頁面，或者簡單一個404頁面。

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

hash模式的路由參數(shù)被干擾

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

const router = new VueRouter({
  routes: [
    // 動態(tài)路徑參數(shù) 以冒號開頭
    { path: '/user/:id', component: User }
  ]
})
const userId = '123'
// 兩種跳轉(zhuǎn)方式
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，就能拿到傳遞的參數(shù)。

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

跳轉(zhuǎn)同組件路由，不刷新？

應(yīng)用場景：跳轉(zhuǎn)同個組件的頁面，但是參數(shù)不同，期望重新刷新頁面。

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

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

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

總結(jié)

到此這篇關(guān)于Vue router應(yīng)用問題的文章就介紹到這了,更多相關(guān)Vue router應(yīng)用問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論