Vue的路由動態重新導向和導航守衛實例

下面我就為大家分享一篇Vue的路由動態重新導向和導航守衛實例，具有很好的參考價值，希望對大家有幫助。

根據vue官方文檔，對於重定向有詳細的範例，但是關於使用方法動態重定向的描述卻不多，重定向部分的描述如下：

重定向

重定向也是透過routes 設定來完成，下面範例是從/a 重定向到/b：

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: '/b' }
 ]
})

重定向的目標也可以是一個命名的路由：

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]
})

甚至是一個方法，動態返回重定向目標：

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: to => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
 }}
 ]
})`这里写代码片`

關於動態重定向的範例如下：

 { path: '/dynamic-redirect/:id?',
  redirect: to => {
  const { hash, params, query } = to
  if (query.to === 'foo') {
   return { path: '/foo', query: null }
  }
  if (hash === '#baz') {
   return { name: 'baz', hash: '' }
  }
  if (params.id) {
   return '/with-params/:id'
  } else {
   return '/bar'
  }
  }
 }

首先參數解構，獲取hash、params、query，然後根據獲取值進行邏輯判斷之後動態路由重定向。這裡的return值是path值，而不是params值，必須是已經存在的path才能進行路由重定向。而這個path不能使自身，因為作為一個重定向路由跳到自身還要繼續重定向，就會進行一個死循環。

現在需求如下：

為了防止使用者隨便改變路由參數而導致頁面崩潰，需要進行路由重定向，將不符合要求的參數進行重定向到一個規範頁面。例如使用者點選按鈕跳轉/list/1但是使用者自己將1進行改變傳遞不符合規範的參數給頁面，希望能夠在使用者改變參數值後跳到預設的規格頁面

#以上程式碼實現的效果是拿到路由參數，如果使用者將頁面參數改的不符合規範就進行路由重定向。使得頁面可以取得正確參數值。現在的效果是如果使用者輸入/1則進入正常頁面/list/1,輸入/xsajsxoal、/5、/-5 等不符合規範的參數就會跳到/list/0。

雖然重定向的邏輯是沒有問題的但問題依舊存在。那用戶繼續將/list/1改成/list/xsjknxkja怎麼辦呢？

可見重定向是不適合解決這個問題的。這時就用到了vue路由的導航守衛。導航守衛的實作方式如下：

 {
  path: '/:type',
  name: 'normal',
  component: index,
  beforeEnter (to, from, next) {
  if (/^[0-3]$/.test(to.params.type)) {
   next()
  } else {
   next('/0')
  }
  }
 }

關於導航守衛官方文件描述如下：

如其名，vue-router 提供的導航守衛主要用來透過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全局的, 單一路由獨享的, 或組件級的。

記住參數或查詢的改變並不會觸發進入/離開的導航守衛。你可以透過觀察 $route 物件來應對這些變化，或使用 beforeRouteUpdate 的元件內守衛。

你可以使用 router.beforeEach 註冊一個全域前置守衛：

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

當一個導覽觸發時，全域前置守衛會依照建立順序呼叫。守衛是非同步解析執行，此時導航在所有守衛 resolve 完成之前一直處於 等待中。

每個守衛方法接收三個參數：

#to: Route: 即將要進入的目標路由對象

from: Route: 目前導覽正要離開的路由

next: Function: 一定要呼叫該方法來resolve 這個鉤子。執行效果依賴 next 方法的呼叫參數。

next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。

next(false): 中斷目前的導航。如果瀏覽器的 URL 改變了（可能是使用者手動或瀏覽器後退按鈕），那麼 URL 位址會重設到 from 路由對應的位址。

next(‘/') 或 next({ path: ‘/' }): 跳到一個不同的位址。目前的導航被中斷，然後進行一個新的導航。

next(error): (2.4.0 ) 如果傳入next 的參數是一個Error 實例，則導航會被終止且該錯誤會傳遞給router.onError()註冊過的回調。

確保要呼叫 next 方法，否則鉤子就不會被 resolved。

根據需求並不需要使用到全域守衛，只需要使用到路由獨享守衛，因此只需要在路由內添加beforeEnter然後判斷是否符合參數規範，是的話用next() 進入下一個鉤子,否則用next('/')跳到目標位址。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

Vue.js實作可設定的登入表單程式碼詳解

Vue專案中如何引入icon圖示

JavaScript中的E-mail 位址格式驗證

以上是Vue的路由動態重新導向和導航守衛實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！