Vue:$route 和 $router 的区别

参考:

https://uzshare.com/view/788446

https://router.vuejs.org/zh/

$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。

① $route.path字符串，对应当前路由的路径，总是解析为绝对路径，如 "/order"。

② $route.params一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。

③ $route.query一个 key/value 对象，表示 URL 查询参数。 例如，对于路径 /foo?user=1，则有 $route.query.user为1， 如果没有查询参数，则是个空对象。

④ $route.hash当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。

⑤ $route.fullPath完成解析后的 URL，包含查询参数和 hash 的完整路径。

⑥ $route.matched数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

⑦ $route.name   当前路径名字

$router 是“路由实例”对象，即使用 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等。

$router.push和$router.replace的区别：

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

• 使用replace方法不会向 history 添加新记录，而是替换掉当前的 history 记录，即当replace跳转到的网页后，‘后退’按钮不能查看之前的页面。