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

導(dǎo)航表示路由正在發(fā)生改變蝙眶。vue-router提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航弦赖。有多種機(jī)會(huì)植入路由導(dǎo)航過(guò)程中：全局的季率，單個(gè)路由獨(dú)享的乾巧，或者組件級(jí)的。
參數(shù)或查詢的改變并不會(huì)觸發(fā)進(jìn)入/離開(kāi)的導(dǎo)航守衛(wèi)涧郊。你可以通過(guò)觀察$route對(duì)象來(lái)應(yīng)對(duì)這些變化，或使用beforeRouteUpdate的組件內(nèi)守衛(wèi)眼五。

全局前置守衛(wèi)

可以使用router.beforeEach注冊(cè)一個(gè)全局前置守衛(wèi)妆艘。

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

當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)彤灶，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行批旺，此時(shí)導(dǎo)航在所有守衛(wèi)resolve完之前一直處于等待中幌陕。
每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：

• to:Route：即將要進(jìn)入的目標(biāo)路由對(duì)象
• from:Route：當(dāng)前導(dǎo)航正要離開(kāi)的路由
• next:Function：一定要調(diào)用該方法來(lái)resolve這個(gè)鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)汽煮。
  • next(): 進(jìn)行管道中的下一個(gè)鉤子搏熄。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是confirmed（確認(rèn)的）暇赤。
  • next(false)：中斷當(dāng)前的導(dǎo)航心例。如果瀏覽器的URL改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕），那么URL地址會(huì)重置到from路由對(duì)應(yīng)的地址鞋囊。
  • next('/')或者next({path:'/'})：跳轉(zhuǎn)到一個(gè)不同的地址止后。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航溜腐。你可以向next傳遞任意位置對(duì)象译株，且允許設(shè)置諸如replace:true、name:'home'之類(lèi)的選項(xiàng)以及任何用在router-link的to prop或router.push中的選項(xiàng)挺益。
  • next(error)：如果傳入next的參數(shù)是一個(gè)Error實(shí)例歉糜，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給router.onError()注冊(cè)過(guò)的回調(diào)。

確保要調(diào)用next方法望众，否則鉤子就不會(huì)被resolved匪补。

全局解析守衛(wèi)

在2.5.0+可以用router.beforeResolve注冊(cè)一個(gè)全局守衛(wèi)。這和router.beforeEach類(lèi)似黍檩，區(qū)別是在導(dǎo)航被確認(rèn)之前叉袍，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用刽酱。

全局后置鉤子

也可以注冊(cè)全局后置鉤子喳逛，然而和守衛(wèi)不同的是，這些鉤子不會(huì)接受next函數(shù)也不會(huì)改變導(dǎo)航本身棵里。

router.afterEach((to, from) => {
  // ...
})

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

可以在路由配置上直接定義beforeEnter守衛(wèi)润文。

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

這些守衛(wèi)與全局前置守衛(wèi)的方法參數(shù)是一樣的。

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

可以在路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)殿怜。

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 不典蝌！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前头谜，組件實(shí)例還沒(méi)被創(chuàng)建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當(dāng)前路由改變骏掀，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候截驮，
    // 由于會(huì)渲染同樣的 Foo 組件笑陈，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用葵袭。
    // 可以訪問(wèn)組件實(shí)例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪問(wèn)組件實(shí)例 `this`
  }
}

beforeRouteEnter守衛(wèi)不能訪問(wèn)this涵妥，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒(méi)被創(chuàng)建。
不過(guò)坡锡，可以通過(guò)傳一個(gè)回調(diào)給next來(lái)訪問(wèn)組件實(shí)例蓬网。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)鹉勒。

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

注意beforeRouteEnter是支持給next傳遞回調(diào)的唯一守衛(wèi)帆锋。對(duì)于beforeRouteUpdate和beforeRouteLeave來(lái)說(shuō)，this已經(jīng)可用了贸弥，所以不支持傳遞回調(diào)窟坐，因?yàn)闆](méi)有必要了。

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

這個(gè)離開(kāi)守衛(wèi)通常用來(lái)禁止用戶在還未保存修改前突然離開(kāi)绵疲。該導(dǎo)航可以通過(guò)next(false)來(lái)取消哲鸳。

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

完整的導(dǎo)航解析流程

1. 導(dǎo)航被觸發(fā)。
2. 在失活的組件里調(diào)用離開(kāi)守衛(wèi)盔憨。
3. 調(diào)用全局的beforeEach守衛(wèi)徙菠。
4. 在重用的組件里調(diào)用beforeRouteUpdate守衛(wèi)。
5. 在路由配置里調(diào)用beforeEnter郁岩。
6. 解析異步路由組件婿奔。
7. 在被激活的組件里調(diào)用 beforeRouteEnter。
8. 調(diào)用全局的beforeResolve守衛(wèi) (2.5+)问慎。
9. 導(dǎo)航被確認(rèn)萍摊。
10. 調(diào)用全局的afterEach鉤子。
11. 觸發(fā)DOM更新如叼。
12. 用創(chuàng)建好的實(shí)例調(diào)用beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)冰木。

路由元信息

定義路由的時(shí)候可以配置meta字段。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

我們稱(chēng)呼routes配置中的每個(gè)路由對(duì)象為路由記錄笼恰。路由記錄可以是嵌套的踊沸，因此，當(dāng)一個(gè)路由匹配成功后社证，他可能匹配多個(gè)路由記錄逼龟。
例如，根據(jù)上面的路由配置追葡，/foo/bar這個(gè)URL將會(huì)匹配父路由記錄以及子路由記錄腺律。
一個(gè)路由匹配到的所有路由記錄會(huì)暴露為$route對(duì)象（還有在導(dǎo)航守衛(wèi)中的路由對(duì)象）的$route.matched數(shù)組奕短。因此，我們需要遍歷$route.matched來(lái)檢查路由記錄中的meta字段匀钧。
下面例子展示在全局導(dǎo)航守衛(wèi)中檢查元字段篡诽。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 確保一定要調(diào)用 next()
  }
})

過(guò)渡動(dòng)效

<router-view>是基本的動(dòng)態(tài)組件，所以我們可以用<transition>組件給它添加一些過(guò)渡效果榴捡。

<transition>
  <router-view></router-view>
</transition>

單個(gè)路由的過(guò)渡

上面的用法會(huì)給所有路由設(shè)置一樣的過(guò)渡效果，如果你想讓每個(gè)路由組件有各自的過(guò)渡效果朱浴，可以在各路由組件內(nèi)使用<transition>并設(shè)置不同的name吊圾。

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}
const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}

基于路由的動(dòng)態(tài)過(guò)渡

還可以基于當(dāng)前路由與目標(biāo)路由的變化關(guān)系，動(dòng)態(tài)設(shè)置過(guò)渡效果：

<!-- 使用動(dòng)態(tài)的 transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>
// 接著在父組件內(nèi)
// watch $route 決定使用哪種過(guò)渡
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

數(shù)據(jù)獲取

有時(shí)候翰蠢，進(jìn)入某個(gè)路由后项乒，需要從服務(wù)器獲取數(shù)據(jù)。例如梁沧，在渲染用戶信息時(shí)檀何，你需要從服務(wù)器獲取用戶的數(shù)據(jù)。我們可以通過(guò)兩種方式來(lái)實(shí)現(xiàn)：

• 導(dǎo)航完成之后獲韧⒅А：先完成導(dǎo)航频鉴，然后在接下來(lái)的組件生命周期鉤子中獲取數(shù)據(jù)。在數(shù)據(jù)獲取期間顯示加載中之類(lèi)的指示恋拍。
• 導(dǎo)航完成之前獲榷饪住：導(dǎo)航完成前，在路由進(jìn)入的守衛(wèi)中獲取數(shù)據(jù)施敢，在數(shù)據(jù)獲取成功后執(zhí)行導(dǎo)航周荐。

導(dǎo)航完成后獲取數(shù)據(jù)

使用這種方式時(shí)，會(huì)馬上導(dǎo)航和渲染組件僵娃，然后在組件的created鉤子中獲取數(shù)據(jù)概作。這讓我們有機(jī)會(huì)在數(shù)據(jù)獲取期間展示一個(gè)loading狀態(tài)，還可以在不同視圖間展示不同的loading狀態(tài)默怨。
假設(shè)我們有一個(gè)Post組件讯榕，需要基于$route.params.id獲取文章數(shù)據(jù)。

<template>
  <div class="post">
    <div class="loading" v-if="loading">
      Loading...
    </div>
    <div v-if="error" class="error">
      {{ error }}
    </div>
    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 組件創(chuàng)建完后獲取數(shù)據(jù)先壕，
    // 此時(shí) data 已經(jīng)被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有變化瘩扼，會(huì)再次執(zhí)行該方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}
</script>

在導(dǎo)航完成前獲取數(shù)據(jù)

通過(guò)這種方式，我們?cè)趯?dǎo)航轉(zhuǎn)入新的路由前獲取數(shù)據(jù)垃僚。我們可以在接下來(lái)的組件的beforeRouteEnter守衛(wèi)中獲取數(shù)據(jù)集绰，當(dāng)數(shù)據(jù)獲取成功后只調(diào)用next方法。

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // 路由改變前谆棺，組件就已經(jīng)渲染完了
  // 邏輯稍稍不同
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

在為后面的視圖獲取數(shù)據(jù)時(shí)栽燕，用戶會(huì)停留在當(dāng)前的界面罕袋，因此建議在數(shù)據(jù)獲取期間，顯示一些進(jìn)度條或者別的指示碍岔。如果數(shù)據(jù)獲取失敗浴讯，同樣有必要展示一些全局的錯(cuò)誤提醒。

滾動(dòng)行為

使用前端路由蔼啦，當(dāng)切換到新路由時(shí)榆纽，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置捏肢，就像重新加載頁(yè)面那樣奈籽。vue-router能做到，而且更好鸵赫，它讓你可以自定義路由切換時(shí)頁(yè)面如何滾動(dòng)衣屏。
注意: 這個(gè)功能只在支持history.pushState的瀏覽器中可用。
當(dāng)創(chuàng)建一個(gè)Router實(shí)例辩棒，你可以提供一個(gè)scrollBehavior方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滾動(dòng)到哪個(gè)的位置
  }
})

scrollBehavior方法接收to和from路由對(duì)象狼忱。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng)popstate導(dǎo)航 (通過(guò)瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。
這個(gè)方法返回滾動(dòng)位置的對(duì)象信息一睁，長(zhǎng)這樣：

• { x: number, y: number }
• { selector:string,offset?:{ x:number,y:number }} (offset只在2.6.0+支持)

如果返回一個(gè)falsy (falsy不是 false)的值钻弄，或者是一個(gè)空對(duì)象，那么不會(huì)發(fā)生滾動(dòng)卖局。

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

對(duì)于所有路由導(dǎo)航斧蜕，簡(jiǎn)單地讓頁(yè)面滾動(dòng)到頂部。
返回savedPosition砚偶，在按下后退/前進(jìn)按鈕時(shí)批销，就會(huì)像瀏覽器的原生表現(xiàn)那樣。

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

模擬滾動(dòng)到錨點(diǎn)的行為染坯。

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

我們還可以利用路由元信息更細(xì)顆粒度地控制滾動(dòng)均芽。

異步滾動(dòng)

2.8.0新增

你也可以返回一個(gè)Promise來(lái)得出預(yù)期的位置描述：

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}

將其掛載到從頁(yè)面級(jí)別的過(guò)渡組件的事件上，令其滾動(dòng)行為和頁(yè)面過(guò)渡一起良好運(yùn)行是可能的单鹿。

路由懶加載

當(dāng)打包構(gòu)建應(yīng)用時(shí)掀宋，Javascript包會(huì)變得非常大，影響頁(yè)面加載仲锄。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊劲妙，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了儒喊。
結(jié)合Vue的異步組件和Webpack的代碼分割功能镣奋，輕松實(shí)現(xiàn)路由組件的懶加載。
首先怀愧，可以將異步組件定義為返回一個(gè)Promise的工廠函數(shù) (該函數(shù)返回的Promise應(yīng)該resolve組件本身)：

const Foo = () => Promise.resolve({ /* 組件定義對(duì)象 */ })

第二侨颈，在 Webpack中余赢，我們可以使用動(dòng)態(tài)import語(yǔ)法來(lái)定義代碼分塊點(diǎn) (split point)：

import('./Foo.vue') // 返回 Promise

注意：如果您使用的是Babel，你將需要添加syntax-dynamic-import插件哈垢，才能使Babel可以正確地解析語(yǔ)法妻柒。

結(jié)合這兩者，這就是如何定義一個(gè)能夠被Webpack自動(dòng)代碼分割的異步組件耘分。

const Foo = () => import('./Foo.vue')

在路由配置中什么都不需要改變举塔，只需要像往常一樣使用Foo：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

把組件按組分塊

有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同個(gè)異步塊(chunk)中。只需要使用命名chunk求泰，一個(gè)特殊的注釋語(yǔ)法來(lái)提供chunk name啤贩。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

Webpack會(huì)將任何一個(gè)異步模塊與相同的塊名稱(chēng)組合到相同的異步塊中。