安装 vue-router
在命令行中进入 vue 的项目目录里，运行命令 npm install vue-router --save 来进行安装
npm install vue-router --save
使用 vue-router
在 main.js 文件中引入 vue-router、安装路由功能、定义组件并引入、创建 router 实例并进行配置、最后创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能。代码如下：
main.js
经过上面的配置之后呢，路由匹配到的组件将会渲染到
App.vue 里的 <router-view></router-view>（很关键）那么这个App.vue里应该这样写：
App.vue
这样就会把渲染出来的页面挂载到这个id为app的div里了。效果如下：
效果图
重定向 redirect
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/Home'}, // 这样进/ 就会跳转到/home
{ path: '/Home', component: Home }
]
})
嵌套路由
通过 /home/info 就可以访问到 info 组件了
const router = new VueRouter({
routes: [
{ path: '/Home', component: Home,
children: [
{ path: 'Info', component: Info}
]
}
]
})
路由懒加载
通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。
const Home = () => import('./components/Home.vue')
路由对象和路由匹配
路由对象，即 $router 会被注入每个组件中，可以利用它进行一些信息的获取:
| 属性 | 说明 |
|---|---|
| $route.path | 当前路由对象的路径，如 '/view/a'
|
| $rotue.params | 关于动态片段（如 /user/:username )的键值对信息,如 {username: 'paolino'}
|
| $route.query | 请求参数，如 /foo?user=1 获取到 query.user = 1
|
| $route.hash | 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串 |
| $route.fullPath | 完成解析后的 URL，包含查询参数和 hash 的完整路径 |
| $route.matched | 一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组) |
| $route.name | 当前路由的名称 |
| $route.redirectedFrom | 如果存在重定向，即为重定向来源的路由的名字 |
小总结
综合上述，一个包含重定向、嵌套路由、懒加载的 main.js 如下：
main.js
更详细的 vue-router 功能请参考文档：官方文档
