Vue Router 版本号为 v3.x
1、区别
用一句话来概括这两个区别就是 route 是用来获取路由信息的，router是用来操作路由的。
2、route
2.1、什么是 route
一个路由对象 (route object) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)。
路由对象是不可变 (immutable) 的，每次成功的导航后都会产生一个新的对象。
2.2、路由属性
2.2.1、path
字符串，对应当前路由的路径，总是解析为绝对路径，如 “/about”。
2.2.2、params
一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。换句话说就是通过 params 传递的参数。
2.2.3、query
一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。也包括通过 query
传递的参数。
2.2.4、hash
当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。
2.2.5、fullPath
完成解析后的 URL，包含查询参数和 hash 的完整路径。
2.2.6、matched
一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
const router = new VueRouter({
routes: [
// 下面的对象就是路由记录
{
path: '/foo',
component: Foo,
children: [
// 这也是个路由记录
{
path: 'bar', component: Bar }
]
}
]
})
当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象 (副本)。
2.2.7、name
当前路由的名称，如果有的话。
2.2.8、redirectedFrom
如果存在重定向，即为重定向来源的路由的名字。
2.2.9、meta
路由元信息
2、router
2.1、什么是 router
router 是全局路由的实例，是 router 构造方法的实例。
2.2、实例属性
2.2.1、app
配置了 router 的 Vue 根实例。
2.2.2、apps
Vue 根实例数组
2.2.3、mode
路由使用的模式。
2.2.4、currentRoute
当前路由对应的路由信息对象（route）。
2.2.5、START_LOCATION
以路由对象的格式展示初始路由地址，即路由开始的地方。可用在导航守卫中以区分初始导航。
import VueRouter from 'vue-router'
const router = new VueRouter({
// ...
})
router.beforeEach((to, from) => {
if (from === VueRouter.START_LOCATION) {
// 初始导航
}
})
2.2.6、afterHooks
2.2.7、beforeHooks
2.2.8、resolveHooks
2.2.9、fallback
2.2.10、history
HTML5History
2.2.11、matcher
addRoute
addRoutes
getRoutes
match
这几个方法的对象
2.2.12、options
创建 Router 时传递的原始配置对象。只读的。
2.3、实例方法
2.3.1、路由守卫
增加全局的导航守卫
在 2.5.0+ 下面这三个方法都返回一个移除已注册的守卫/钩子的函数。
beforeEach
beforeResolve
afterEach
2.3.2、路由跳转
动态的导航到一个新 URL。
下面这些函数仅在安装路由插件并将其传递给 Vue 根实例后调用。
push
向 history 栈中添加一个路由
函数签名：
router.push(location, onComplete?, onAbort?)
该方法的第一个参数可以是一个字符串路径，或者一个描述地址的对象。
可选的在 router.push 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。在 3.1.0+，可以省略第二个和第三个参数，此时如果支持 Promise，router.push 或 router.replace 将返回一个 Promise。
replace
替换路由，没有历史记录
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
go
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
back
这个方法的参数是空，意思是在 history 记录中后退1步
forward
这个方法的参数是空，意思是在 history 记录中向前1步
2.3.3、getMatchedComponents
函数签名：
const matchedComponents: Array<Component> = router.getMatchedComponents(location?)
返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类，不是实例)。通常在服务端渲染的数据预加载时使用。
2.3.4、resolve
函数签名：
const resolved: {
location: Location;
route: Route;
href: string;
} = router.resolve(location, current?, append?)
解析目标位置 (格式和 <router-link> 的 to prop 一样)。
current 是当前默认的路由 (通常你不需要改变它)
append 允许你在 current 路由上附加路径 (如同 router-link)
2.3.5、addRoutes
已废弃：使用 addRoute() 代替。
2.3.6、addRoute
添加一条新路由规则。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。
函数签名:
addRoute(route: RouteConfig): () => void
2.3.7、addRoute
添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。
函数签名:
addRoute(parentName: string, route: RouteConfig): () => void
2.3.8、getRoutes
获取所有活跃的路由记录列表。注意只有文档中记录下来的 property 才被视为公共 API，避免使用任何其它 property，例如 regex，因为它在 Vue Router 4 中不存在。
函数签名:
getRoutes(): RouteRecord[]
2.3.9、onReady
函数签名：
router.onReady(callback, [errorCallback])
该方法把一个回调排队，在路由完成初始导航时调用，这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件。
这可以有效确保服务端渲染时服务端和客户端输出的一致。
第二个参数 errorCallback 只在 2.4+ 支持。它会在初始化路由解析运行出错 (比如解析一个异步组件失败) 时被调用。
2.3.10、onError
函数签名：
router.onError(callback)
注册一个回调，该回调会在路由导航过程中出错时被调用。注意被调用的错误必须是下列情形中的一种：
错误在一个路由守卫函数中被同步抛出；
错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理；
渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。
2.3.11、init
2.3.12、match
上述方法或属性未注明的，博主也暂时不清楚，还请各位大佬在评论区给出解释。谢谢
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！