VueRouter

当 <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')

https://router.vuejs.org/zh/