Vue2.0 $router和$route的区别

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

一、$router

Vue2.0 $router和$route的区别_第1张图片
VueRouter对象
  • router.push方法,

// 字符串
this.router.push({ path: 'home' })
// 命名的路由
this.router.push({ path: 'detail', query: { did: '123' }})

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

二、$route

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

路由信息对象:即route.path
字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。
2.route.params** 一个 key/value 对象,包含了 动态片段 和 全匹配片段, 如果没有路由参数,就是一个空对象。 **3.route.query
一个 key/value 对象,表示 URL 查询参数。
例如,对于路径 /foo?user=1,则有 route.hash**
当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。
5.route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
7.$route.name
当前路径名字

你可能感兴趣的:(Vue2.0 $router和$route的区别)