vue-router路由对象与组件注入

路由对象

一个路由对象表示当前激活的路由的状态信息, 包含了当前 URL 解析得到的信息, 还有 URL 匹配到的路由记录

路由对象是不可变的, 每次成功导航后都会产生一个新的对象

路由对象出现在多个地方:

• 组件内, this.$route

• 在 $route 观察者回调内

• router.match(localtion) 返回值

• 导航守卫的参数:

  router.beforeEach((to, from, next) => {
    // to 和 from 都是路由对象
  })

• scrollBehavior 方法的参数:

  const router = new VurRouter({
    scrollBehavior(to, from, savedPosition)=> {
      // to 和 from 都是路由对象
    }
  })

路由对象属性

• $route.path
  • 类型: string
    字符串, 对应当前路由的路径, 总是解析为绝对路径,如: ‘/foo/bar’
• $route.params
  • 类型: Object
    一个 key/value 对象, 包含了动态片段和全匹配片段, 如果没有路由参数, 就是一个空对象
• $route.query
  • 类型: Object
    一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
• $route.hash
  • 类型: string
    当前路由的 hash 值(带#), 如果没有 hash 值, 则为空字符串
• $route.fullPath
  • 类型: string
    完成解析后的 url, 包含查询参数核 hash 的完整路径
• $route.matched
  • 类型: Array
    一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

当 URL 为 `/foo/bar`，`$route.matched` 将会是一个包含从上到下的所有对象 (副本)。
const router = new VueRouter({
  routes: [
    // 下面的对象就是路由记录
    {
      path: '/foo',
      component: Foo,
      children: [
        // 这也是个路由记录
        { path: 'bar', component: Bar }
      ]
    }
  ]
})

• $route.name
  当前路由的名称

• $route.redirectedFrom
  如果存在重定向, 即为重定向来源的路由的名字

组件注入

注入的属性

通过在 Vue 根实例的 router 配置传入 router 实例，下面这些属性成员会被注入到每个子组件。

• this.$router

• router 实例。

• this.$route

当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。

增加的组件配置选项

• beforeRouteEnter

• beforeRouteUpdate

• beforeRouteLeave