前言

本文記錄vue2的vue-router在使用過(guò)程中遇到的一些問(wèn)題。

問(wèn)題記錄

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

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

全局守衛(wèi)

beforeEach/beforeResolve/afterEach

路由獨(dú)享守衛(wèi)

beforeEnter

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

beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave

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

導(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)建好的實(shí)例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。

下面是幾個(gè)常用鉤子的實(shí)際應(yīng)用場(chǎng)景：

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

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

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

beforeRouteEnter：獲取當(dāng)前頁(yè)面的前一個(gè)頁(yè)面的信息，比如我們?cè)诘卿涰?yè)，登錄后要重定向到前一個(gè)頁(yè)面，就可以通過(guò)這個(gè)鉤子獲取。注意：這里， 不！能！獲取組件實(shí)例 this，因?yàn)樾陆M件還沒(méi)有被創(chuàng)建。不過(guò)，可以傳一個(gè)回調(diào)，給next來(lái)訪問(wèn)實(shí)例，在創(chuàng)建好實(shí)例后，會(huì)執(zhí)行。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過(guò) `vm` 訪問(wèn)組件實(shí)例
  })
}

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

動(dòng)態(tài)路由實(shí)現(xiàn)權(quán)限控制

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

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

具體看下面的偽代碼：

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

在handleAuthority中我們做了這些事情

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

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

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

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

const router = new VueRouter({
  routes: [
    // 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開(kāi)頭
    { 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

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

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

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

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

解決方案：我們可以在beforeRouteUpdate中，重新執(zhí)行進(jìn)入頁(yè)面要執(zhí)行的代碼，但如果需要初始化所有變量，難免有遺漏，更簡(jiǎn)單的方式是，監(jiān)聽(tīng)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)用問(wèn)題的文章就介紹到這了,更多相關(guān)Vue router應(yīng)用問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論