Vue 中 $route和$router 的区别是什么（） vue.js

今天我们来探讨一下Vue 中 $route和$router 两者之间到底有什么区别
我们可以理解区别为: $route 是用来获取路由信息的，$router是用来操作路由的

文章图片

$route 对象
route是路由信息对象，里面主要包含路由的一些基本信息，包含当前的路径，参数，query对象等。(包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom)
route object 出现在多个地方:
1.组件内的 this.route和route watcher 回调（监测变化处理）;
2.router.match(location) 的返回值
3.scrollBehavior 方法的参数
4.导航钩子的参数：

router.beforeEach((to, from, next) => { // to 和 from 都是路由信息对象,后面使用路由的钩子函数就容易理解了 })

**1.$route.path** 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。 **2.$route.params** 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。 **3.$route.query** 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。 **4.$route.hash** 当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点 **5.$route.fullPath** 完成解析后的 URL，包含查询参数和 hash 的完整路径。 **6.$route.matched** 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 **7.$route.name当前路径名字****8.$route.meta路由元信息**

文章图片

$router对象
$router对象是全局路由的实例，是router构造方法的实例,包含了一些路由的跳转方法，钩子函数等
路由实例方法：
1、push

// 字符串 this.$router.push('home') // 对象 this.$router.push({ path: 'home' }) // 命名的路由 this.$router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数，变成 /register?plan=123 this.$router.push({ path: 'register', query: { plan: '123' }}) push方法其实和是等同的。

注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
2、go