将静态道具和动态参数传递给具有多个组件的 Vue 路由

Question

我设置了一个 Vue 路由来显示学校学位课程的课程。

{
  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 访问它：

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

当你select在multiselect一个选项时，这叫做：

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

我的问题是，如何将路径中的 selected 选项传递给路由中的道具，而不是像上面那样将其硬编码为 "English"？这甚至 possible/a 是个好方法吗？

Answer 1

你是对的，你需要使用函数来return道具。在多个命名组件的情况下，您可以这样做：

{
  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"
      }
    }
  }
}

将静态道具和动态参数传递给具有多个组件的 Vue 路由

Passing static props and dynamic params to Vue route with multiple components

vue.js

vue-router