여러 구성 요소를 사용하여 정적 소품 및 동적 매개 변수를 Vue 경로로 전달

여러 구성 요소를 사용하여 정적 소품 및 동적 매개 변수를 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 
  v-model="degree"
  placeholder="Select a field..."
  :options="degrees"
  @select="searchDegrees">
</multiselect>

다중 선택 항목에서 옵션을 선택하면 이를 다음과 같이 부른다.

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

내 질문은, 내가 위에서 했던 것처럼 "영어"로 하드코딩하는 대신, 내가 선택한 옵션을 어떻게 경로의 소품 경로에서 전달할 수 있을까 하는 것이다.이것이 이것을 할 수 있는 좋은 방법일까?

맞아, 소품 반납할 때는 기능을 이용해야 해.명명된 여러 구성 요소의 경우 다음과 같이 수행할 수 있다.

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

참조URL: https://stackoverflow.com/questions/48039487/passing-static-props-and-dynamic-params-to-vue-route-with-multiple-components