history 模式：充分利用 history.pushState API 来完成 URL 跳转

  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  // some code

当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active 。


默认 hash 模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

history 模式：充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面，此模式如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面。


动态路由匹配

{path: '/user/:id', component: User}

user/abc user/123 都将映射到相同的路由

this.$route.params.id（template 中 $route.params.id）


{path: '/user-*'} 匹配以 `/user-` 开头的任意路径


嵌套路由

User 需要 <router-view></router-view>

children 路径不能以 "/" 开头

{

  path: '/user',

  component: User,

  children: [

    {

      // 当 /user/profile 匹配成功，

      // UserProfile 会被渲染在 User 的 <router-view> 中

      path: 'profile',

      component: UserProfile

    },

    {

      // 当 /user/posts 匹配成功

      // UserPosts 会被渲染在 User 的 <router-view> 中

      path: 'posts',

      component: UserPosts

    }

  ]

}


编程式的导航

<router-link :to="..."> 等同于调用 router.push(...)

this.$router.push(location, onComplete?, onAbort?)

this.$router.push('home')

this.$router.push({ path: 'register', query: { plan: 'private' }})

this.$router.push({ name: 'user', params: { userId: '123' }})


location 如果提供了 path，params 会被忽略，解决办法：{path: `register/${id}`}


onComplete 和 onAbort 两个回调用于导航成功完成（在所有的异步钩子被解析之后）或终止（导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由）的时候进行相应的调用


<router-link :to="..." replace> 等同于调用 router.replace(...)，和 router.push() 唯一的不同就是，它不会向 history 添加新记录，而是替换掉当前的 history 记录


router.go(n) 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。



命名视图

<router-view></router-view>

<router-view name="a"></router-view>

<router-view name="b"></router-view>


{

  path: '/',

  components: {

    default: Foo,

    a: Bar,

    b: Baz

  }

}



重定向和别名

{ path: '/a', redirect: '/b' }

{ path: '/a', redirect: { name: 'foo' }}

{ path: '/a', redirect: to => {

  // 方法接收 目标路由 作为参数

  // return 重定向的 字符串路径/路径对象

}}


{ path: '/a', component: A, alias: '/b' }



导航守卫

全局前置守卫

router.beforeEach((to, from, next) => {

  // to: Route: 即将要进入的目标 路由对象

  // from: Route: 当前导航正要离开的路由

  // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  // some code

  next()

})


全局后置钩子

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

  // ...

})


路由独享的守卫

{

  path: '/foo',

  component: Foo,

  beforeEnter: (to, from, next) => {/* */}

}


组件内的守卫

const Foo = {

  template: `...`,

  beforeRouteEnter (to, from, next) {

    // 在渲染该组件的对应路由被 confirm 前调用

    // 【不能】获取组件实例 `this`，不过，你可以通过传一个回调给 next来访问组件实例

    next(vm => {

      // 通过 `vm` 访问组件实例

    })

    // 因为当守卫执行前，组件实例还没被创建

  },

  beforeRouteUpdate (to, from, next) {

    // 在当前路由改变，但是该组件被复用时调用

    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

    // 可以访问组件实例 `this`

  },

  beforeRouteLeave (to, from, next) {

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

    // 可以访问组件实例 `this`

  }

}


路由元信息

{

  path: 'bar',

  component: Bar,

  meta: { requiresAuth: true, title: 'BAR' }

}

遍历 $route.matched 来检查路由记录中的 meta 字段。


滚动行为

scrollBehavior 只在支持 history.pushState 的浏览器中可用。

new VueRouter({

  routes: [...],

  scrollBehavior (to, from, savedPosition) {

    // savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

    // return 期望滚动到哪个的位置

  }

})



路由懒加载

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