VueJS如何将表单参数推送到vue路由器？答案

【问题标题】：VueJS how to push form params to vue router?VueJS如何将表单参数推送到vue路由器？
【发布时间】：2019-12-14 02:33:41
【问题描述】：

我正在尝试创建一个编辑表单。如何从 url (vue-router) 获取参数并将它们传递给 html 表单？以及如何将表单数据推送到 url？

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<form class="form-horizontal">

    <!-- MultiSelect -->
    <div class="form-group">
      <label class="col-xs-2 col-md-1 control-label">User</label>
      <div class="col-xs-10 col-md-3">
        <multiselect
            v-model="user"
            :options="userList"
            :searchable="true"
            label="Name"
            track-by="Name">
        </multiselect>
      </div>
    </div>

    <!-- MultiSelect -->
    <div class="form-group">
      <label class="col-xs-2 col-md-1 control-label">Team</label>
      <div class="col-xs-10 col-md-3">
        <multiselect
            v-model="team"
            :options="teamList"
            :searchable="true"
            label="Name"
            track-by="Name">
        </multiselect>
      </div>
    </div>

    <!-- DatePicker -->
    <div class="form-group">
      <label class="col-xs-2 col-md-1 control-label">Birthday</label>
      <div class="col-xs-10 col-md-3">
        <date-picker
            v-model="calendarDate"
            :shortcuts="shortcuts"
            :first-day-of-week="1"
            appendToBody
         ></date-picker>
      </div>
    </div>

    <!-- Button -->
    <div class="form-group">
      <label class="col-md-1 control-label"></label>
      <div class="col-md-4">
        <button @click="EditUser" class="btn btn-primary">Edit</button>
      </div>
    </div>

</form>

所以我想在模型和 vue-router 之间绑定数据。当我打开 edit.html#/user=5&team=3&bday=1991-01-10 时，必须填写适当的多选字段。怎么做？

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

您可以在路由 URL 中使用query：

将所有多选字段存储在一个计算变量中，并添加一个观察者以在参数发生任何更改时将新参数推送到您的 URL：

computed: {
    queryParams({ user, team, calendarDate }) {
        return {
            user: user,
            team: team,
            bday: calendarDate
        }
    }
},
watch: {
    queryParams() {
        this.$router.push( name: this.$route.name, query: this.queryParams })
    }
}

创建页面后，使用函数获取查询并设置表单变量：

created() {
    this.setQueryParams();
},
methods() {
    setQueryParams() {
        const query = this.$route.query;
        this.user = query.user;
        this.team = query.team; 
        this.calendarDate = query.bday;
        // you might need to do some formatting for the birthday and do some checks to see if the parameter exists in the query so you don't get errors
    }
}

【讨论】：