vue-router的使用
已经知道vue.js通过将组件进行组合，可以做成应用程序。并且通过将vue.js和vue-router的组合可以实现单页应用，用户体验佳，实现单页应用，就是将组件映射到路由，并且告诉路由要在哪里渲染特定的组件
可以使用简单的例子进行说明
- html部分
< div>
< p>
< !-- 使用 router-link 组件来导航. -->
< !-- 通过传入 `to` 属性指定链接. -->
< !-- 默认会被渲染成一个 `< a>` 标签 -->
< router-link to="/apple">Go to Apple< /router-link>
< router-link to="/banana">Go to Banana< /router-link>
< /p>
< !-- 路由出口 -->
< !-- 路由匹配到的组件将渲染在这里 -->
< router-view>< /router-view>
< /div>
在vue-router中，使用< router-link>来进行导航，用其to属性指定链接实现路由跳转。但是在渲染的时候< router-link>会被解析为< a>标签。 < router-view>< /router-view>是用作渲染路由匹配到的组件
- JavaScript部分
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const apple = { template: '< div>Apple< /div>' }
const banana = { template: '< div>Banana< /div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
{ path: '/apple', component: apple },
{ path: '/banana', component: banana }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
})
注：当 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active，可以利用此特性完成选择路由后的高亮效果！
通过注入路由器，我们可以在任何组件内通过 this.
router 访问当前路由
动态路由匹配
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：
const User = {
template: '< div>User< /div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
/user/foo 和 /user/bar 都将映射到相同的路由。一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用
响应路由参数的变化
当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
//或者使用beforeRouteUpdate 守卫
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
路由的嵌套
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，
< div id="app">
< router-view>< /router-view>
< /div>
const User = {
template: '< div>User {{ $route.params.id }}< /div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
这里的 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 。例如，在 User 组件的模板添加一个 ：
'const User = {
template: `
< div class="user">
< h2>User {{ $route.params.id }}< /h2>
< router-view>< /router-view>
< /div>
`
}
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 中
path: 'posts',
component: UserPosts
}
]
}
]
})
!!注意： 要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。此时，基于上面的配置，当你访问 /user/foo时，User的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 中
{ path: '', component: UserHome },
// ...其他子路由
]
}
]
})
