前言

在瀏覽器中點(diǎn)擊鏈接實(shí)現(xiàn)導(dǎo)航的方式，叫做聲明式導(dǎo)航。例如：普通網(wǎng)頁(yè)中點(diǎn)擊<a>鏈接、vue項(xiàng)目中點(diǎn)擊<router-link>都屬于聲明式導(dǎo)航。

在瀏覽器中調(diào)用API方法實(shí)現(xiàn)的導(dǎo)航方式，叫做編程式導(dǎo)航。例如：普通網(wǎng)頁(yè)中調(diào)用loaction.href跳轉(zhuǎn)到新頁(yè)面的方式，屬于編程式導(dǎo)航。

vue-router中編程式導(dǎo)航API

編程式路由導(dǎo)航作用就是不借助<router-link>實(shí)現(xiàn)路由跳轉(zhuǎn)，讓路由跳轉(zhuǎn)更加靈活。

vue-router提供了許多編程式導(dǎo)航的API，其中最常見的導(dǎo)航API有以下幾種：

1）this.$router.push('hash地址')

跳轉(zhuǎn)到指定的 hash 地址，并增加一條歷史記錄。

2）this.$router.replace('hash地址')

跳轉(zhuǎn)到指定的 hash 地址，并替換掉當(dāng)前的歷史記錄。

3）this.$router.go(數(shù)值n)

調(diào)用this.$router.go()方法，可以在瀏覽歷史中前進(jìn)和后退。

在實(shí)際開發(fā)中，一般只會(huì)前進(jìn)和后退一層頁(yè)面。因此 vue-router 提供了如下兩個(gè)便捷方法：

1）$router.back() 在歷史記錄中，后退到上一個(gè)頁(yè)面。

2）$router.forward() 在歷史記錄中，前進(jìn)到下一個(gè)頁(yè)面。

這兩個(gè)方法一般可以放在行內(nèi)樣式里面使用，更便捷一點(diǎn)，注意：行內(nèi)樣式里面就不必再寫this了

導(dǎo)航守衛(wèi)

導(dǎo)航守衛(wèi)也叫路由守衛(wèi)，可以控制路由的訪問(wèn)權(quán)限，示意圖如下：

全局守衛(wèi)

全局前置守衛(wèi)：每次發(fā)生路由的導(dǎo)航跳轉(zhuǎn)時(shí)，都會(huì)觸發(fā)全局前置守衛(wèi)。因此，在全局前置守衛(wèi)中，程序員可以對(duì)每個(gè)路由進(jìn)行訪問(wèn)權(quán)限的控制，那么如何創(chuàng)建全局前置守衛(wèi)呢？如下：

全局前置守衛(wèi)的回調(diào)函數(shù)中接收3個(gè)形參，如上圖所示，其作用為：

to：是將要訪問(wèn)的路由的信息對(duì)象

from：是將要離開的路由的信息對(duì)象

next：是一個(gè)函數(shù)，調(diào)用 next() 表示放行，允許這次路由導(dǎo)航

next函數(shù)的3種調(diào)用方式：如下圖所示

控制后臺(tái)主頁(yè)的訪問(wèn)權(quán)限：

router.beforeEach(function (to, from, next) {
  if (to.path === '/main') {
    // 要訪問(wèn)后臺(tái)主頁(yè)，需要判斷是否有token
    const token = localStorage.getItem('token')
    if (token) { // token值存在
      next()
    } else {
      // 沒(méi)有登錄，強(qiáng)制跳轉(zhuǎn)到登錄頁(yè)
      next('/login')
    }
  } else {
    next() // 訪問(wèn)的不是后臺(tái)主頁(yè)，直接放行
  }
})

當(dāng)然我們也可以通過(guò)全局前置守衛(wèi)來(lái)進(jìn)行權(quán)限的查看，案例如下：

// 全局前置守衛(wèi)：初始化時(shí)、每次路由切換前執(zhí)行
router.beforeEach((to, from, next) => {
  console.log('beforeEach', to, from)
  if (to.meta.isAuth) { // 判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制
    if (localStorage.getItem('token') === 'key') { // 權(quán)限控制的具體規(guī)則
      next() // 放行
    } else {
      alert('暫無(wú)權(quán)限查看')
    }
  } else {
    next() // 放行
  }
})

全局后置守衛(wèi)： 全局后置守衛(wèi)相對(duì)于前置守衛(wèi)使用的次數(shù)相對(duì)較少，后置守衛(wèi)一般使用在項(xiàng)目的title實(shí)時(shí)發(fā)送變化時(shí)來(lái)使用。

// 全局后置守衛(wèi)，初始化時(shí)執(zhí)行、每次路由切換后執(zhí)行
router.afterEach((to, from) => {
  console.log('afterEach', to, from)
  if (to.meta.title) {
    document.title = to.meta.title // 修改網(wǎng)頁(yè)的title
  } else {
    document.title = 'process'
  }
})

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

顧名思義獨(dú)享路由守衛(wèi)就是某一個(gè)路由獨(dú)享的，和其他路由沒(méi)關(guān)系。如下：

beforeEnter (to, from, next) {
  console.log('beforeEach', to, from)
  if (to.meta.isAuth) { // 判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制
    if (localStorage.getItem('admin') === 'admin123') { // 權(quán)限控制的具體規(guī)則
      next() // 放行
    } else {
      alert('暫無(wú)權(quán)限查看')
    }
  } else {
    next() // 放行
  }
}

組件路由守衛(wèi)

顧名思義是在組件內(nèi)部使用的守衛(wèi)。如下：使用方式和上文一樣，這里不在贅述。

// 通過(guò)路由規(guī)則，進(jìn)入該組件時(shí)被調(diào)用
beforeRouteEnter (to, from, next) { },
// 通過(guò)路由規(guī)則，離開該組件時(shí)被調(diào)用
beforeRouteLeave (to, from, next) { }

當(dāng)然，作者講解的也不是太全面，如果你想更細(xì)致的了解vue-router的導(dǎo)航守衛(wèi)，推薦看一下官方文檔對(duì)導(dǎo)航守衛(wèi)的說(shuō)明：導(dǎo)航守衛(wèi)官方說(shuō)明 。

到此這篇關(guān)于vue-router的導(dǎo)航守衛(wèi)使用講解的文章就介紹到這了,更多相關(guān)vue-router的導(dǎo)航守衛(wèi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論