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

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. **$route.query\ast \ast 一个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 当前路径名字
      8. $route.meta 路由元信息

时光里，没有白走的路。