vue-router

vue-router监听路由参数的变化

watch: {
   '$route' (to, from) {
    // 对路由变化作出响应...
  }
}

完整的 vue-router 导航解析流程

1.导航被触发；

2.在失活的组件里调用beforeRouteLeave守卫；

3.调用全局beforeEach守卫；

4.在复用组件里调用beforeRouteUpdate守卫；

5.调用路由配置里的beforeEnter守卫；

6.解析异步路由组件；

7.在被激活的组件里调用beforeRouteEnter守卫；

8.调用全局beforeResolve守卫；

9.导航被确认；

10..调用全局的afterEach钩子；

11.DOM更新；

12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

// 路由配置守卫即配置在路由对象中

// 组件实力的导航守卫：beforeRouteLeave、beforeRouteEnter、beforeRouteUpdate

// 全局守卫：beforeEach、beforeResolve、afterEach

// 路由配置守卫：beforeEnter

编程式导航

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

TIP：如果使用了path，则params不会生效，需要使用query，params搭配name使用

vue-router有哪几种导航钩子（ 导航守卫 ）

全局钩子函数：定义在全局的路由对象中，主要有：

beforeEach：前置守卫，在路由切换开始时调用

beforeResolve：解析守卫，在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后被调用

afterEach：后置钩子，在每次路由切换成功进入激活阶段时被调用

单独路由独享的守卫：

beforeEnter ：可以在路由配置上直接定义beforeEnter 钩子

组件的钩子函数：定义在组件的router选项中：

beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用，不能获取组件实例 `this`，因为当守卫执行前，组件实例还没被创建

beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用， 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

beforeRouteLeave： 导航离开该组件的对应路由时调用

TIP：导航钩子接收三个参数：to，from，next，通过调用next()，传入不同的参数，可以改变路由的跳转。

动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：

export default new Router({
  routes: [    
    {
      path: '/hi/:id',
      name: 'hi',
      component: hi
    }
  ]
})

在vue组件中，使用params获取参数：

<template>
    <div class="hello">
        <p>{{$route.params.id}}</p>
    </div>
</template>

嵌套路由

在路由文件中使用children属性定义对应的子路由：

export default new Router({
  routes: [
    {
      path: '/me',
      name: 'Me',
      component: Me,
      children: [
        {
          path: 'collection',
          name: 'Collection',
          component: Collection
        }
      ]
    }
  ]
})

路由懒加载

结合 Vue 的异步组件和 Webpack的代码分割功能，实现路由组件的懒加载：

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

TIP：如果使用的是 Babel，需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

在路由配置中什么都不需要改变，只需要像往常一样使用 Foo：

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

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

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

vue-router路由的两种模式：hash和history

hash模式的URL中有“#”，其工作原理是hashchange事件，可以在window监听hash的变化。

window.onhashchange = function(event){
    console.log(event);
}

history模式的工作原理是HTML5新增的history.pushState和window.onpopstate事件，这种模式下URL中没有“#”，与正常的url无异，但当f5刷新页面时，页面会报404，所以需要后端的配合，如果 URL匹配不到任何静态资源，则应该返回 index.html 页面，这个页面就是你 app 依赖的页面。