有没有和我一样的童鞋,有时候在想获取路由信息,或者想跳转到别的页面时,会不确定到底用$router
还是$route
,如果你有这个困惑,那我们一起学习一下吧。
$route
$route
其实是一个路由对象,表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的路由记录。
$route
可以出现在多个地方:
- 组件内,即
this.$route
- 在
$route.match(location)
的返回值中 - 在导航守卫的参数中,
to
、from
都是路由对象 -
scrollBehavior
方法的参数中 - 在
$route
观察者回调内
路由对象的属性:
-
$route.path
当前路由的路径 -
$route.params
一个 key/value 对象,包含了动态片段和全匹配片段 -
$route.query
URL 查询参数 -
$route.name
当前路由的名称 -
$route.redirectedFrom
重定向来源的路由的名字 -
$route.fullPath
完成解析后的 URL,包含查询参数和 hash 的完整路径 -
$route.matched
一个数组,包含当前路由的所有嵌套路径片段的路由记录
route
$router
$router
是VueRouter
的实例,我们可以在组件内通过this.$router
访问路由器。
通过调用this.$router.push
、this.$router.replace
、this.$router.go
等实现路由的跳转。
也可以通过router
实例调用导航守卫方法,像比较常用的:router.beforeEach
、router.afterEach
等。
网友评论