Vue2.0 $router和$route的区别

使用Vue2.0 router 过程中,会对router 和route 会有混淆,现做笔记记录

一、$router

VueRouter对象
  • router为VueRouter实例,主要是实现路由跳转使用。想要导航到不同URL,则使用router.push方法,

// 字符串
this.router.push('home') // 对象 this.router.push({ path: 'home' })
// 命名的路由
this.router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /detail?did=123 this.router.push({ path: 'detail', query: { did: '123' }})

push方法其实和<router-link :to="...">是等同的。
注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。

二、$route

Object对象
  • route object ,路由信息对象,表示当前激活的路由的状态信息,包含了完整路径、当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录)
  • route object 是 immutable(不可变) 的,每次成功的导航后都会产生一个新的对象

路由信息对象:即router会被注入每个组件中,可以利用它进行一些信息的获取** **1.route.path
字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。
2.route.params** 一个 key/value 对象,包含了 动态片段 和 全匹配片段, 如果没有路由参数,就是一个空对象。 **3.route.query
一个 key/value 对象,表示 URL 查询参数。
例如,对于路径 /foo?user=1,则有 route.query.user == 1, 如果没有查询参数,则是个空对象。 **4.route.hash**
当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。
5.route.fullPath** 完成解析后的 URL,包含查询参数和 hash 的完整路径。 **6.route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
7.$route.name
当前路径名字

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

推荐阅读更多精彩内容