Question

在第一个组件中，我有几个按钮应根据单击的按钮重定向到某些嵌套路线。

<btn to="financials/financialdata"></btn>

<btn to="financials/revenuedata"></btn>

此路由显示的组件应根据路由名称而有所不同。最重要的是选项形式，其中预选的值与路由名称匹配，但略有不同。这是我在路由器中配置该路由的方式

{ path: '/financials/:name', component: dataview}

这是我选择的形式：

      <v-select
          :items="datasets"
          label="Solo field"
          item-text="text"
          item-value="value"
          v-model="data"
          dense
          solo
        ></v-select>

这是选项：

datasets: [
        {
          text: "Financial Condition",
          value: 'A'
        },
{
          text: "Revenue Data",
          value:'B'

        }]

那么如何将路线名称与dataset中的值匹配，以便可以在选择表单中预先选择我？我还想在组件页面的标题中显示当前显示的路线：

<h1>{{title}}</h1>

因此，基于路径参数，它将显示与在表单中选择的标题相同的标题（因此基于dataset）

Answer 1

在路由器配置中...为路由添加名称或使用元参数

在路由文件中：

  {
    path: "/revenue",
    name: "Revenue",
    component: Revenue
  }

在选择组件中：

<script>
export default {
  data() {
    return {
      datasets: [
        {
          text: "Financial Condition",
          value: "A"
        },
        {
          text: "Revenue Data",
          value: "Revenue"
        }
      ]
    };
  },
  mounted() {
    this.selectValue = this.$route.name;
  }
};
</script>

Answer 2

在组件中，可以在创建的函数中设置或更新数据集，或使用路由参数将表单绑定到的数据集。

created: function () {
            this.yourformdata = this.$route.params.thevalue 

        },

将路由与VueJS中的预选值匹配

2 个答案: