$router和$route的区别

有没有和我一样的童鞋,有时候在想获取路由信息,或者想跳转到别的页面时,会不确定到底用$router还是$route,如果你有这个困惑,那我们一起学习一下吧。

$route

$route其实是一个路由对象,表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的路由记录。

$route可以出现在多个地方:

  • 组件内,即this.$route
  • $route.match(location)的返回值中
  • 在导航守卫的参数中,tofrom都是路由对象
  • scrollBehavior方法的参数中
  • $route 观察者回调内

路由对象的属性:

  • $route.path 当前路由的路径
  • $route.params 一个 key/value 对象,包含了动态片段和全匹配片段
  • $route.query URL 查询参数
  • $route.name 当前路由的名称
  • $route.redirectedFrom 重定向来源的路由的名字
  • $route.fullPath 完成解析后的 URL,包含查询参数和 hash 的完整路径
  • $route.matched 一个数组,包含当前路由的所有嵌套路径片段的路由记录
    route

$router

$routerVueRouter的实例,我们可以在组件内通过this.$router 访问路由器。

通过调用this.$router.pushthis.$router.replacethis.$router.go等实现路由的跳转。
也可以通过router实例调用导航守卫方法,像比较常用的:router.beforeEachrouter.afterEach等。

router

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容