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里面提供了三大类钩子
一、全局钩子
二、某个路由独享的钩子
三、组件内钩子

全局钩子

顾名思义，全局钩子全局用，使用以下

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

 

组件内钩子

首先看一下官方定义：

你能够在路由组件内直接定义如下路由导航钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

路由组件!路由组件!路由组件!重要的事情说三遍，你们必定要注意这里说的是“路由组件”，而路由组件！== 组件，路由组件！== 组件，路由组件！== 组件！以前一直没注意这点，而后在子组件里面傻乎乎的调钩子函数发现一直没用。。。
咱们先来看一下什么是路由组件？

路由组件：直接定义在router中component处的组件

也就是说router中定义的入口vue文件以外的组件，是没有钩子函数的，也就不用说使用了。可是若是你使用了并不会报错，只是没反应。（本想画个图的，太懒了。。。本身理解理解吧，很好理解的）
这里再回头看下这个路由内钩子是怎么用的，很简单和data、method平级的方法

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

 

三种路由钩子中都涉及到了三个参数，这里直接上官方介绍吧

to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 必定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。若是所有钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false): 中断当前的导航。若是浏览器的 URL 改变了（多是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不一样的地址。当前的导航被中断，而后进行一个新的导航。

模式和钩子基本就到这了，有须要的能够在仔细研究一个官当的文档。以上仅是我的学习使用过程的一些理解，若是错误，欢迎指出~~