入门Vue Router，看完这篇就够了

vue Router 是vue.js的官方路由管理器，能够经过hash匹配组件并渲染而不刷新页面

vue Router的两种路由模式

hash模式

• 改变#后面的hash值，会触发onhashchange事件，在该事件里对页面进行局部操做
• hash的变化会被浏览器记录（历史访问栈）下来，能够前进、后退、刷新而不向服务器发送请求
• 经过匹配#后面的hash，与vueRouter配置文件里的path对应作路由跳转

history模式

• 基于浏览器history的pushState()、replaceState()、popState()来实现，能够读取、修改浏览器历史记录栈
• 能够前进、后退不发往服务器发送请求，但刷新会向服务器发送请求
• 若匹配不到资源，则返回404，所以须要后台支持，重定向到根目录主页

动态路由匹配

经过不一样参数，来匹配到同一组件

好比咱们有一个通用的文章详情页，须要经过不一样的文章id来显示不一样的内容，则咱们能够经过 article:id 来完成

$route.params

一个 key/value 对象，包含了动态片断和全匹配片断

article/:id 转换为> $route.params.id

article/123 => $route.params.id = 123

$route.query

一个 key/value 对象，表示 URL 查询参数

article?id='123' => $route.params.id = '123'

导航守卫

注意！改变路由的参数不会触发进入/离开的导航守卫

• 使用watch监听$route
• 使用组件内守卫beforeRouteUpdate来监听变化

全局守卫

全局前置守卫< beforeEach >

当导航被触发时会被调用，守卫是异步解析执行的，当守卫未resolved以前，导航一直处于等待

=> code <=
router.beforeEach((to, from, next) => {
    ······
})
复制代码

• 能够在此阶段作权限校验

全局解析守卫< beforeResolve >

当导航被确认同时组件内守卫和异步守卫都解析后触发

全局后置钩子< afterEach >

导航跳转完成后被触发

router.afterEach((to, from) => {
    ······
})
复制代码

路由独享守卫

beforeEnter

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

组件内守卫

仅限在组件内定义使用

beforeRouteEnter

beforeRouteEnter (to, from, next) {
    // 不！能！获取组件实例 `this`
    // 由于当守卫执行前，组件实例还没被建立
}
复制代码

• 在渲染该组件对应路由被确认前调用
• 在此阶段没法访问this，由于守卫在导航确认前被调用，此时组件还未被建立
• 能够经过给next设置回调来访问this

beforeRouteEnter (to, from, next) {
    next(vm => {
        经过vm访问组件实例
    })
}
复制代码

beforeRouteUpdate

beforeRouteUpdate (to, from, next) {
    // 能够访问this
    this.name = to.params.name // 能够获取路由参数
    next()
}
复制代码

• 当导航路由发生改变，组件被复用时触发
• 复用组件时没法触发进入、离开的导航守卫
• 给路由传参会触发此守卫

beforeRouteLeave

beforeRouteLeave (to, from, next) {
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
    if (answer) {
        next()
    } else {
        next(false) // 可经过此方法取消导航
    }
}
复制代码

• 当离开此导航路由时触发
• 通常用于禁止用户还未保存修改前离开