路由实现的方式
声明式。<router-link :to="...">
编程式。router.push(...) 、router.replace(...)
<router-link> 属于内部调用，等同于router.push()。
router.replace 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.push('home') // 字符串
router.push({ path: 'home' }) // 对象
router.push({ name: 'user', params: { userId: 123 }}) // 命名的路由
router.push({ path: 'register', query: { plan: 'private' }}) // 带查询参数，变成 /register?plan=private
注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
router.push({ path: '/user', params: { userId }}) // -> /user
同样的规则也适用于 router-link 组件的 to 属性。
router.go(n)
参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
router.go(1)
router-link 渲染成 a 标签，router-view 渲染成路由切换区域。
<div>
<router-link class='router-link-active' to='/home'>go to home</router-link>
<router-link to='/power'>go to home</router-link>
</div>
<router-view></router-view>
将组件(components)映射到路由(routes)。
import Vue from 'vue'
import VueRouter from ’vue-router‘
import Home from './component/home'
import Power from './component/power'
Vue.use(VueRouter)
const routes = [
{ path: '/home', component: Home},
{ path: '/power/:id', component: Power}
]
export default new VueRouter({ routes })
动态路由配置
路径参数，使用 :id 将不同Id的用户映射到相同的路由，如（/user/foo 和 /user/bar）
模板参数，
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器和当前路由。
this.$route.params
this.$route.go(-1)
this.$route.push('/')
响应路由参数的变化
动态路由切换时，原来的组件实例会被调用，每个路由渲染的是同个组件，复用高效，但同时组件的生命周期钩子将不会再被调用。
故，服用组件时，使用 watch 监控 $route 对象，实现组件相应的改变。
const User = {
template: '...',
watch: {
'$route' (to, from) { // 对路由变化作出响应... }
}
}
或使用2.2中的 beforeRouteUpdate 守卫
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
嵌套路由
1、在html中再次添加 router-link 、router-view
2、js中在routes中的路由中添加 children 属性。
3、在children中添加对象属性值，属性与一级路由一样。
4、当访问该 User 路由时，不会渲染子路由，除非子路由中有 path:' ' 。
routes: [{
path: '/user/:id', component: User,
children: [ {
path: 'profile', component: UserProfile
}
}]
命名路由
在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称 name 。
routes: [ { path: '/user/:userId', name: 'user', component: User } ]
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
router.push() 也是传一个对象
router.push({ name: 'user', params: { userId: 123 }})
命名视图（多个路由层）
在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。
如果 router-view 没有设置名字(name)，那么默认为 default。
<router-view></router-view>
<router-view name="a"></router-view>
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：
routes: [ {
path: '/',
components: {
default: Foo,
a: Bar
}
} ]
嵌套命名视图
使用命名视图创建嵌套视图的复杂布局。
<router-view/>
<router-view name="helper">
{
path: '/settings',
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}
重定向和别名
重定向 redirect
routes: [
{ path: '/a', redirect: '/b' }， // 从 /a 重定向到 /b
{ path: '/a', redirect: { name: 'foo' }}， // 重定向的目标也可以是一个命名的路由：
{ path: '/a', redirect: to => { // 甚至是一个方法，动态返回重定向目标：
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
别名 alias
“重定向” 的意思是，当用户访问 /a时，URL 将会被替换成 /b 路由。
“别名” 是 /a 的别名(第二个名字)是 /b。当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
{ path: '/a', component: A, alias: '/b' }
路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
使用 props 将组件和路由解耦：
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
如果 props 被设置为 true，route.params 将会被设置为组件属性。
对象模式
{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
函数模式
创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
HTML5 History 模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
