如何使用Vue-Router模式和鉤子（詳細教學）

這篇文章主要介紹了Vue-Router模式和鉤子的用法，現在分享給大家，也給大家做個參考。

上一篇主要寫了一下vuer-router的基本使用，可以說解決溫飽了，下面就再來點下午茶吧

模式

vue-router中的模式選項主要在router實例化的時候進行定義的，如下

const router = new VueRouter({
　　　mode: 'history', // 两种类型history 还有 hash
   routes: routes // 可以缩写成routes
})

有兩種模式可供選擇，history 和hash，大致對比一下，

模式	優點	#缺點
hash	使用簡單、無需後台支援	在url中以hash形式存在，不會傳到後台
history	位址明確，便於理解和後台處理	需要後台配合

hash模式對於後台來講就是一個url，因為位址中的hash值是不會傳到後台的，所以伺服器端做一個根位址的映射就可以了。
history模式最終的路由都體現在url的pathname中，這部分是會傳到伺服器端的，因此需要服務端對每個可能的path值都作對應的對應。或採用模糊匹配的方式進行映射。

除此之外，history模式下，如果後端不是一對一的進行映射，而是模糊匹配的話，那麼就要注意一下404的情況了。這時候就需要在前端router中定義404頁了。

404路由的定義

由於router本身的匹配是從上到下的，如果在前面找到了匹配的路由，就跳轉了。因此可以直接在最後加上404的路由，如下

let routerConfig = [{
  path: '/pages',
  component: App,
  children: [{
    path: 'demo/step1/list',
    component: coupon,
    name: 'coupon-list',
    meta: {
      title: '红包'
    }
  }]
}, {
  path: '*',
  component: NotFound,
  name: 'notfound',
  meta: {
    title: '404-页面丢了'
  }
}]

在前面不匹配的時候，* 代表全部，就是都指向404頁

路由鉤子

#路由鉤子主要是給使用者在路由發生變化時進行一些特殊的處理而定義的，靠。 。好拗口啊。

總體來講vue裡面提供了三大類鉤子

#1、全域鉤子
2、某個路由獨享的鉤子
3、元件內鉤子

全域鉤子

顧名思義，全域鉤子全域用，使用如下

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: routerConfig
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'demo'
  if (!to.query.url && from.query.url) {
    to.query.url = from.query.url
  }
  next()
})

router.afterEach(route => {
})

某個路由獨享鉤子

就像說的一樣，給某個路由單獨使用的，本質上和後面的元件內鉤子是一樣的。都是特指的某個路由。不同的是，這裡的一般定義在router當中，而不是在元件內。如下

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]
})

元件內鉤子

首先看一下官方定義：

你可以在路由元件內直接定義以下路由導航鉤子

1. beforeRouteEnter

2. beforeRouteUpdate (2.2 新增)

3. beforeRouteLeave

路由組件!路由組件!路由組件!重要的事情說三遍，大家一定要注意這裡說的是“路由組件”，而路由組件！ == 組件，路由組件！ == 組件，路由組件！ == 組件！之前一直沒注意這一點，然後在子組件裡面傻呼呼的調鉤子函數發現一直沒用。 。 。

我們先來看什麼是路由元件？

路由元件：直接定義在router中component處的元件

也就是說router中定義的入口vue檔案以外的元件，是沒有鉤子函數的，也就不用說使用了。但是如果你使用了並不會報錯，只是沒反應。 （本來想畫個圖的，太懶了。。。自己理解理解吧，很好理解的）

這裡再回頭看下這個路由內鉤子是怎麼用的，很簡單和data、method平級的方法

beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next()
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
},
computed: {},
method: {}

三種路由鉤子中都涉及到了三個參數，這裡直接上官方介紹吧

1. to: Route: 即將要進入的目標路由物件

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

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

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

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

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

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

相關文章：

jQuery取代節點元素的操作方法

#Servlet3.0與純javascript透過Ajax互動的實例詳解

vue 實作的樹形菜的實例代碼

##

以上是如何使用Vue-Router模式和鉤子（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！