参考资料：vue-router官方API（https://router.vuejs.org/zh/api/）
一、<router-link>
(1)<router-link>会被默认渲染成<a>标签，也可以通过tag属性设置渲染成其他标签。当目标路由被激活时，链接元素会自动设置一个表示激活的类名。
(2)使用<router-link>而不直接使用<a>的理由：
1.<router-link>在history模式和hash模式下，表现行为都一致，并且会自动在IE9自动降级使用hash模式
2.在history模式下，使用router-link，浏览器不会重新加载页面，a标签点击后会重新加载页面
3.在history模式下，router-link使用base选项时，to属性可以简写。而a一直要写全路径。
(3)<router-link>的v-slot可以获取到底层的一些属性，用来做定制。使用v-slot时，要向router-link中传入一个单独的子元素，否则会被包裹在span中。
href:解析后的URL。
route：解析后的规范化地址。
navigate：导航函数
isActive：需要应用激活的class为true
isExactActive:需要应用精确激活的class时为true
(4) router-link的属性
to:required,目标路由的链接。
replace:默认false,不会留下新的history记录
append:默认false, 导航至相对路径时，是在当前路径的基础上
tag:可以设置该属性，使router-link渲染成其他标签
active-class:可以另外设置激活时的类名
exact:默认false,包含匹配，如果to='/',那么所有路径都会被激活，但如果设置exact,只有'/'才会被激活
event:设置触发导航的事件
exact-active-class:另外设置精确匹配时的class
二、router-view
渲染路径匹配到的组件。
如果设置name,就可以有多个视图，在各个命名路由里渲染对应组件
三、Router的构建属性
routes:[],
mode:"hash" | "history" | "abstract"(node环境)
base：'/app/' .应用的基路径
linkActiveClass:''
linkExactActiveClass:''
scrollBehavior: Function. 定义路由切换时页面如何滚动，只在支持history.pushState的浏览器中可用
parseQuery/stringifyQuery:Function. 提供自定义查询字符串的解析/反解析函数。覆盖默认行为。
fallback:默认true.当浏览器不支持history.pushState，是否回退到hash模式。在IE9中，如果是false,会使每个router-link都触发整页刷新。
四、Router实例属性
router.app:配置了router的Vue根实例。
router.mode:路由使用的模式。
router.currentRoute:当前路由对应的路由信息对象。
五、Router实例方法
router.beforeEach((to, from, next) => {})
router.beforeResolve((to, from, next) => {})
router.afterEach((to, from) => {})
router.push()
router.replace()
router.go()
router.back()
router.forward()
router.getMatchedComponents()。 返回当前路由匹配的组件数组，通常在服务端渲染的数据预加载时使用
router.resolve(location, current?,append?) 解析目标位置
router.addRoutes(routes:Array<RouteConfig>) 动态添加更多路由规则
router.onReady(callback, [errorCallback]) 在路由完成初始导航时回调
router.onError(callback) 路由导航出错时调用
六、路由对象
一个路由对象表示当前激活的路由的状态信息。
路由对象时不可变的，每次成功导航后都会产生一个新对象。
(1) 路由对象出现的地方：
· 在组件内，this.$route
· 在$route 观察者回调内
· router.match(location)的返回值
· 导航守卫的参数 router.beforeEach()里的to、from
· scrollBehavior()方法的参数to、from
(2) 路由对象的属性
route.path: '/foo/bar'. 绝对路径
route.params :Object
route.query ：查询参数
route.hash：hash值
route.fullPath : 包含查询参数和hash的完整路径
route.matched: 数组，包含当前路由的所有嵌套路径片段的路由记录
route.name
route.redirectedFrom:如果是重定向来的，则是重定向来源的名称
网友评论