Vue-Router:router 对象和 route对象详解

  1. Router

    1. 全局对象

    2. $router对象是全局路由的实例,是router构造方法(new Router 的实例 )的实例。

    3. console.log(this.$router)

      VueRouter {app: Vue, apps: Array(1), options: {}, beforeHooks: Array(0), resolveHooks: Array(0),}
      afterHooks: []
      app: Vue {_uid: 0, _isVue: true, $options: {}, _renderProxy: Proxy, _self: Vue,}
      apps: [Vue]
      beforeHooks: []
      fallback: false
      history: HashHistory {router: VueRouter, base: '', current: {}, pending: null, ready: true,}
      matcher: {match: ƒ, addRoute: ƒ, getRoutes: ƒ, addRoutes: ƒ}
      mode: "hash"
      options: {routes: Array(7)}
      resolveHooks: []
      currentRoute: (...)
      [[Prototype]]: Object
      
    4. 路由实例方法

      1. push
        1. query :可以用路由的name或path 结合query 传参
        2. params 只能使用路由的name 结合 params 传参
      2. go
      3. replace
  2. Route

    1. 局部对象

    2. 一个路由匹配到的所有路由记录会暴露为 $route 对象

    3. $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。

    4. console.log(this.$route)

      
      {name: 'VFather', meta: {}, path: '/VFather', hash: '', query: {},}
      fullPath: "/VFather"
      hash: ""
      matched: [{}]
      meta: {}
      name: "VFather"
      params: {}
      path: "/VFather"
      query: {}
      [[Prototype]]: Object
      
      
      1. $route.path 字符串,对应当前路由的路径,总是解析为绝对路径
      2. $route.params 一个key/value对象, 如果没有路由参数,就是一个空对象。
      3. ** r o u t e . q u e r y ∗ ∗ 一 个 k e y / v a l u e 对 象 , 表 示 U R L 查 询 参 数 。 例 如 , 对 于 路 径 / f o o ? u s e r = 1 , 则 有 route.query** 一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 route.querykey/valueURL/foo?user=1route.query.user == 1, 如果没有查询参数,则是个空对象。
      4. $route.hash 当前路由的hash值 (不带#) ,如果没有 hash 值,则为空字符串。
      5. $route.fullPath 完成解析后的 URL,包含查询参数和hash的完整路径
      6. $route.matched 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
      7. $route.name 当前路径名字
      8. $route.meta 路由元信息

时光里,没有白走的路。

Logo

前往低代码交流专区

更多推荐