vue-router是什么？
它是单页面应用(SPA)的路径管理器，是vue.js的官方插件，vue的单页面应用基于路由和组件，路由用于设置访问路径，并将路径和组件映射起来，传统页面之间的切换，是用超链接实现的，而在vue.js中则是组件之间的切换，路由就是建立起url和页面之间的映射关系。
vue-router的使用方式
// 1. 定义 (路由) 组件
const Foo = () => import('views/Foo/Foo')
const Bar = => import('views/Bar/Bar')
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
动态路由匹配
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
$router和$route
$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数
-
$route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/home"。
-
$route.params 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。
-
route.query.user为1， 如果没有查询参数，则是个空对象。
-
$route.hash 当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。
-
$route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径。
-
$route.matched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
-
$route.name 当前路径名字
$router 是“路由实例”对象，即使用 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等。
<router-link>和<router-view>
<router-link>会被渲染成a标签，路由匹配到的组件将渲染到<router-view>。
路由导航
- <router-link :to="..."> <router-link :to="{ name: 'user', params: { userId: 123 }}">User
- router.push() router.push(location, onComplete?, onAbort?)在 Vue 实例内部，你可以通过 router.push。想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
-
router.go() go后面的参数是正数，负数代表后退，正数代表前进，类似于window.history.go()。
-
router.replace() 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是替换掉当前的 history 记录。
重定向
路由重定向表示将你原来在转发列表中发向一台路由的路径改成另外一条路径，也就相当于让你的数据走另外一条路到服务器。
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
// 重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
//甚至是一个方法，动态返回重定向目标：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
