router.map

router.map(routeMap)

定义路由映射的主要方法。

参数

  • routeMap: Object

    结构体,键为路径,值为路由配置对象。对于路径匹配规则,查看路由匹配.

路由配置对象

路由配置对象包含两个字段:

  • component: 当路径匹配时,会渲染到顶级 <router-view> 的 Vue 组件。此字段的值可以是调用 Vue.extend 后返回的构造函数,或者普通的组件选项对象。在后一种情况下,路由会隐式调用 Vue.extend

  • subRoutes: 嵌套的子路由映射。对于每一个 subRoutes 映射中的子路由对象,路由器在做匹配时会使用其路径拼接到父级路径后得到的全路径。成功匹配的组件会渲染到父级组件的 <router-view> 中。

例子

router.map({
  // 组件构造函数
  "/a": {
    component: Vue.extend({ /* ... */ })
  },
  // 组件选项对象
  "/b": {
    component: {
      template: "<p>Hello from /b</p>"
    }
  },
  // 嵌套的路由
  "/c": {
    component: {
      // 渲染子视图
      template: "<router-view></router-view>"
    },
    subRoutes: {
      // 当路径是 /c/d 时进行渲染
      "/d": { component: { template: "D" }},
      // 当路径是 /c/e 时进行渲染
      "/e": { component: { template: "E" }}
    }
  }
})
文章导航