vue_router
==================

动态路由::

  //匹配
  /user/:username                  /user/evan
  /user/:username/post/:post_id    /user/evan/post/123

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


嵌套路由::

  <div id="app">
    <router-view></router-view>
  </div>
  const User = {
    template: `
      <div class="user">
        <h2>User {{ $route.params.id }}</h2>
        <router-view></router-view>
      </div>
    `
  }
  const router = new VueRouter({
    routes: [
      { path: '/user/:id', component: User,
        children: [
          {
            // 当 /user/:id/profile 匹配成功，
            // UserProfile 会被渲染在 User 的 <router-view> 中
            path: 'profile',
            component: UserProfile
          },
          {
            // 当 /user/:id/posts 匹配成功
            // UserPosts 会被渲染在 User 的 <router-view> 中
            path: 'posts',
            component: UserPosts
          }
        ]
      }
    ]
  })

编程式的导航::

  声明式
  <router-link :to="..."> 
  编程式
  router.push(...)

  const userId = 123
  router.push({ name: 'user', params: { userId }}) // -> /user/123
  router.push({ path: `/user/${userId}` }) // -> /user/123
  // 这里的 params 不生效
  router.push({ path: '/user', params: { userId }}) // -> /user


重定向和别名::

  const router = new VueRouter({
    routes: [
      { path: '/a', redirect: '/b' },            // 1.普通的
      { path: '/a', redirect: { name: 'foo' }},  // 2.命名的路由
      { path: '/a', redirect: to => {            // 3.方法，动态返回重定向目标
        // 方法接收 目标路由 作为参数
        // return 重定向的 字符串路径/路径对象
      }}
      { path: '/a', component: A, alias: '/b' }  // 4.别名
    ]
  })