如何使用 "data" 或 "methods" 结果到 VueRouter prop

Question

我有如下简单的菜单选项卡路由器：

选项卡 1 |标签 2 |选项卡 3

路由与单独的组件附加到每个选项卡，如下例所示。

const router = new VueRouter({
  routes: [
    { path: '/views/type1', component: Type1, props: { listname: value} }
  ]
})

问题： route[] prop 如何修改为从 vue 的 "data" 取值。基本上，其中一个组件接受属性作为 'Array'，我需要从服务中提取这些数据并附加到组件。

routes: [
        { path: '/views/type1', component: Type1, props: { collection: *[retrieve from service and attach here]*} }
      ]

//集合无法从 "methods" 或 "data" 绑定，它只接受静态数据。

Answer 1

Vue Router 的 props 字段不包含要传递给呈现的视图组件的属性，而是一个布尔标志（或 hash/map 视图名称到布尔标志）它告诉 Vue Router 将任何 路由参数 （从路径解析）作为属性传递给组件。

例如，给定以下内容：

路由配置：

{
  path: '/user/:name/:uid',
  component: User,
  props: true
}

User组件定义：

export default {
  props: ['name', 'uid']
}

URL:
```
/user/john/123
```

然后，User 将在 name 设置为 john 且 uid 设置为 123 的情况下呈现，相当于：

<User :name="john" :uid="123" />

如果您需要使用服务器数据初始化视图，您可以包装在获取数据后初始化的目标组件（例如，使用 Type1View）。在下面的示例中，Type1.list 绑定到本地 list 数据变量。当 Type1View 挂载时，我们从服务器获取数据，并将结果保存在 list 中，这也会更新 Type1.list.

<template>
  <div>
    <Type1 :list="list" />
  </div>
</template>

<script>
export default {
  name: 'Type1View',
  data() {
    return {
      list: []
    }
  },
  async mounted() {
    const data = await this.fetchData();
    this.list = data.list;
  }
}
</script>

如何使用 "data" 或 "methods" 结果到 VueRouter prop

How to use "data" or "methods" result to VueRouter prop

vue.js

vue-router

vue-component

vuejs2