vue.js - 将静态 Prop 和动态参数传递给具有多个组件的 Vue 路由

Question

我设置了一个 Vue 路由来显示学校学位类(class)的类(class)。

{
  path: '/courses-by-degree/:degree',
  components: {
    sidebar: Sidebar,
    content: Grid
  },
  props: {
    sidebar: {
      title: "Fulfills",
      type: "all",
      degree: "",
      keyword: ''
    },
    content: {
      type: "degree",
      degree: "English",
      keyword: "",
      columns: {
        "Title": "title",
        "Term": "term_description",
        "Day, Time": "",
        "Format": "format",
        "Capacity": "availability"
      }
    }
  }
}

您可以通过 URL 或 Vue 多选访问它:

<multiselect 
  v-model="degree"
  placeholder="Select a field..."
  :options="degrees"
  @select="searchDegrees">
</multiselect>

当您在多选中选择一个选项时，这称为:

searchDegrees(selectedOption, id) {
  this.$root.$router.push({ path: `/courses-by-degree/${selectedOption}` });
},

我的问题是，如何将路径中的选定选项传递给 route 的 Prop ，而不是像上面那样将其硬编码为“英语”？这甚至可能/一个好方法吗？

Answer 1

你是对的，你需要使用函数来返回 Prop 。在多个命名组件的情况下，您可以这样做:

{
  path: '/courses-by-degree/:degree',
  components: {
    sidebar: Sidebar,
    content: Grid
  },
  props: {
    sidebar: {
      title: "Fulfills",
      type: "all",
      degree: "",
      keyword: ""
    },
  content: route => {
    return {
      type: "degree",
      degree: route.params.degree,
      keyword: "",
      columns: {
        Title: "title",
        Term: "term_description",
        "Day, Time": "",
        Format: "format",
        Capacity: "availability"
      }
    }
  }
}