overflow

在SPA应用中，我们已经可以通过组件来构建整个应用程序。当组件编写完成之后，剩下要做的就是如何设置访问什么页面显示什么组件的问题了。即：

将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

先来分析这个过程：点击链接（url) → 根据url获取组件 → 在指定位置渲染组件

其中需要设置两部分html和js。

html | 设置链接 | 指定渲染位置 | | :---: | :---: | | router-link | router-view |
js 设置路由匹配组件

动态路由匹配

也是使用 \user\:id 指定动态参数。参数设置到this.$route.params 同时还有$route其它属性，参见API 文档

模式	匹配路径	$route.params
/user/:username	/user/evan	`{ username: 'evan' }`
/user/:username/post/:post_id	/user/evan/post/123	`{ username: 'evan', post_id: 123 }`

嵌套路由

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [

        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },

        // 当 /user/:id/posts 匹配成功
        // UserPosts 会被渲染在 User 的 <router-view> 中
        {
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

要注意，以/开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。

编程式导航

router.push()
router.replace()
router.go()

跟window.history.pushState、window.history.replaceState和window.history.go好像，实际上它们确实是效仿window.historyAPI 的。

命名路由

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

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

命名视图

即当我们在一个页面放置多个组件渲染点时，为了让指定组件放到指定渲染点而放置。

vue router