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

模式

vue-router中的模式選項(xiàng)主要在router實(shí)例化的時(shí)候進(jìn)行定義的，如下

const router = new VueRouter({　　　mode: 'history', // 兩種類型history 還有 hash   routes: routes // 可以縮寫成routes})

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

hash模式對于后臺(tái)來講就是一個(gè)url，因?yàn)榈刂分械膆ash值是不會(huì)傳到后臺(tái)的，所以服務(wù)器端做一個(gè)根地址的映射就可以了。
history模式最終的路由都體現(xiàn)在url的pathname中，這部分是會(huì)傳到服務(wù)器端的，因此需要服務(wù)端對每一個(gè)可能的path值都作相應(yīng)的映射?；蛘卟捎媚：ヅ涞姆绞竭M(jìn)行映射。

除此之外，history模式下，如果后端不是一對一的進(jìn)行映射，而是模糊匹配的話，那么就要注意一下404的情況了。這個(gè)時(shí)候就需要在前端router中定義404頁面了。

404路由的定義

由于router本身的匹配是從上到下的，如果在前面找到了匹配的路由，就跳轉(zhuǎn)了。因此可以直接在最后添加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-頁面丟了'  }}]

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

路由鉤子

路由鉤子主要是給使用者在路由發(fā)生變化時(shí)進(jìn)行一些特殊的處理而定義的，靠。。好拗口啊。

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

1、全局鉤子
2、某個(gè)路由獨(dú)享的鉤子
3、組件內(nèi)鉤子

全局鉤子

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

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 => {})

某個(gè)路由獨(dú)享鉤子

就像說的一樣，給某個(gè)路由單獨(dú)使用的，本質(zhì)上和后面的組件內(nèi)鉤子是一樣的。都是特指的某個(gè)路由。不同的是，這里的一般定義在router當(dāng)中，而不是在組件內(nèi)。如下