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路由对象 

Logo

前往低代码交流专区

更多推荐