$router和$route区别

$router

$router是路由信息对象，包括path、params 、hash、query、fullPath、matched、name等路由信息参数

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' }})

this.$router.push会往history栈中添加一个新的记录，，当我们点击浏览器的返回按钮时可以看到之前的页面。 详细见vue官方文档编程式的导航 | Vue Router

replace

//push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录
// 一般使用replace来做404页面
this.$router.replace('/')

配置路由时path有时候会加 ‘/’ 有时候不加,以’/'开头的会被当作根路径，就不会一直嵌套之前的路径

$route

route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name、meta、path、hash、query、params、fullPath、matched、redirectedFrom等

1、route.path

字符串，对应当前路由的路径，总是解析为绝对路径

2.route.params

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

3、route.query

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

4.route.fullPath

参考文档：https://blog.csdn.net/weixin_58089129/article/details/120810394