vue---router、routes、route的区别

router、routes、route的区别

1.router：路由对象（new的路由对象），包含一些操作路由的功能函数，来实现编程式导航。一般指的是在任何组件内访问路由。如：路由编程式导航的$router.push()

字符串:$router.push('/home')
对象:$router.push({path:'/home'})
命名的路由:$router.push(name:'user',params:userId:123)

$router.replace({path:'home'})  //替换路由，没有历史记录
$router.back()
$router.go()

 push方法的跳转会向history添加一条新纪录,当点击返回按钮时可以看到之前的页面;$router.replace是路由的替换,不会想history添加新纪录,无法返回页面。

2.route：指路由对象表示当前激活的路由的状态信息。如：this.$route指的是当前路由对象，path/meta/query/params

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

3.routes：指创建vue-router路由实例的配置项。用来配置多个route路由对象