vue-router使用详解回顾
官方文档参考地址：https://router.vuejs.org/zh/
vue-router 原理图：
1.router-link
（1）to属性： to (required) | type: string | Location
简述：表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象
使用案例：
Home
Home
Home
Home
Home
User
Register （2）replace 属性 （type: boolean | default: false）
简述：设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录
使用案例：
（3）append 属性（type: boolean | default: false）
简述：设置 append 属性后，则在当前（相对）路径前添加基路径。例如，从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
使用案例：
# 首先从一个页面触发下面的router-link ，当前页面的url为：http：localhost:8080/a
（4）tag属性 （type: String | defualt: ‘a’）
简述： 有时想要 router-link 渲染成某种标签，例如 li标签。 于是使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航
foo
foo （5）active-class 属性 （type: String | default: router-link-active）
简述：设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置
使用案例：
export default new Router({ linkActiveClass : ‘my-active-class’})
注：【如何将"激活时的CSS类名"应用在外层元素】
跳转到foo页面
在这种情况下， 将作为真实的链接（它会获得正确的 href 的），而 "激活时的CSS类名" 则设置到外层的
（6）exact （type: Boolean | default: false）
简述：是否激活默认类名的依据是 inclusive match （全包含匹配）。 举个例子，如果当前的路径是 /a 开头的，那么
使用案例：
// 这个链接只会在地址为 / 的时候被激活
Home
USER
USER-info
// 如果不设置exact，则当路由到了/user/userinfo 页面时，USER也是被设置了router-link-active样式的！（7）events （type: Array
简述：声明可以用来触发导航的事件（默认是‘click‘）。可以是一个字符串或者是一个包含字符串的数组
2.router-view
概述：
（1）name属性 （type: String | default: ‘default’）
简述：如果
3.路由钩子（路由对象）
简述：表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）；路由信息对象是 immutable（不可变） 的，每次成功的导航后都会产生一个新的对象。路由对象出现在多个地方，包括如下：
（1）组件内的 this.$route 和 $route watcher 回调（监测变化处理）
使用案例：（在父组件中实现）
# watch $route 决定使用哪种过渡
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}3-1-1. router.match(location) 的返回值
3-1-2. 导航钩子的参数
router.beforeEach((to, from, next) => {
// to 和 from 都是路由对象
})
3-1-3. scrollBehavior 方法的参数
const router = new VueRouter({
scrollBehavior (to, from, savedPosition) {
// to 和 from 都是路由对象
}
})（2）路由对象的属性
$route.path 返回当前路由路径，绝对路径，如 ”/a/b”
$route.params 返回路由的params的参数对象
$route.query 返回路由的query查询对象
$route.hash 返回当前路径的 #后面的字符串
$route.fullPath 返回完成解析后的 URL，包含查询参数和 hash 的完整路径
$route.matched 路由记录 返回数组记录routes
$route.name 返回路由的name
$route.$route.redirectedFrom 如果存在重定向，即为重定向来源的路由的名字
详细解释，请参考文档地址：
https://router.vuejs.org/zh/api/#路由对象属性
打印结果：console.log( this.$route )
4.路由实例对象
（1）属性
$router.app
$router.mode
$router.currentRoute
（2）方法
$router.beforeEach(guard)
$router.beforeResolve(guard) (2.5.0+): 此时异步组件已经加载完成
$router.afterEach(hook):增加全局的导航钩子
$router.push(location, onComplete?, onAbort?)
$router.replace(location, onComplete?, onAbort?)
$router.go(n)
$router.back()
$router.forward():动态的导航到一个新 url
$router.getMatchedComponents(location?) 返回目标位置或是当前路由匹配的组件数组
打印：console.log(this.$router.getMatchedComponents())
$router.resolve(location, current?, append?)
解析目标位置（格式和
{
location:Location;
route:Route;
href:string;
}$router.addRoutes(routes)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组
$router.onReady(callback)
添加一个会在第一次路由跳转完成时被调用的回调函数。此方法通常用于等待异步的导航钩子完成，比如在进行服务端渲染的时候
5.组件注入
$route 、$router