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

您可以通过网址或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}` });
        },

我的问题是，如何将路径中选定的选项传递给路径中的道具，而不是将其硬编码为＆＃34;英语＆＃34;正如我上面所做的那样？这甚至可能/这是一个很好的方法吗？

Answer 1

您是正确的，您需要使用该函数来返回道具。如果有多个命名组件，则可以这样：

{
  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路径

1 个答案: