美文网首页
Vue2.0 $router和$route的区别

Vue2.0 $router和$route的区别

作者: IAm夏花花 | 来源:发表于2018-05-13 14:32 被阅读0次

    使用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
    当前路径名字

    相关文章

      网友评论

          本文标题:Vue2.0 $router和$route的区别

          本文链接:https://www.haomeiwen.com/subject/fqtldftx.html