一、联系和区别
1、$router
$router 是VueRouter实例
import Vue from 'vue'
import VueRouter from 'vue-router'
const User = () => import('../components/User')
//1.通过Vue.use(插件)安装插件，会去执行插件的install方法
Vue.use(Router)
const routes = [
{
path:'/user',
component:User
}
]
//2.创建路由对象，$router就是这里创建的对象
const router = new VueRouter({
routes
});
//3.导出
export default router
如何验证？
在随便一个组件中打印一下 this.$router ，因为我们在main.js文件中导入了router对象，在main.js文件中再打印一下导入的router对象。两者是一样的。
2、$route
this.$route 指向当前处于活跃状态的路由对象，可以获取当前路由的 path, name, params, query 等属性。
一个路由对象 (route object) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)。
路由对象的属性:
-
$route.path：类型: string字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。
-
$route.params：类型: Object，一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
-
$route.query：类型: Object，一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
-
$route.hash：类型: string，当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。
-
$route.fullPath：类型: string，完成解析后的 URL，包含查询参数和 hash 的完整路径。
-
$route.name：当前路由的名称，如果有的话。(查看 命名路由 | Vue Router官网 )
-
$route.redirectedFrom：如果存在重定向，即为重定向来源的路由的名字。(参阅 重定向和别名 | Vue Router官网）
-
$route.matched：类型:
Array<RouteRecord>，一个数组，包含当前路由的所有嵌套路径片段的路由记录 。 路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
const router = new VueRouter({
routes: [
// 下面的对象就是路由记录
{
path: '/foo',
component: Foo,
children: [
// 这也是个路由记录
{
path: 'bar', component: Bar }
]
}
]
})
二、为什么所有组件都可以使用 $router 和 $route ？
因为所有的组件都继承自Vue实例，而在 Vue.prototype 上定义了 $router 和 $route 两个属性。
在任意一个组件中中打印一下 this （当前组件实例） ，我们看一下它的原型链
在 vue-router的源码中有这样一段代码：
Object.defineProperty(Vue.prototype, '$router', {
get () {
return this._routerRoot._router }
})
Object.defineProperty(Vue.prototype, '$route', {
get () {
return this._routerRoot._route }
})
三、资料
https://github.com/vuejs/vue-router/tree/v3.4.9