如何基于URL参数自动填充BootstrapVue表单输入框

这个需求完全可以实现，以下是修改后的可运行代码及实现逻辑：

完整实现代码 #

<template>
  <div class="col-md-6 mt-3">
    <div class="mt-2">ID</div>
    <b-form-input type="number" v-model="userId"></b-form-input>
    <div class="mt-2">Name</div>
    <b-form-input type="text" v-model="username"></b-form-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 给两个输入框绑定响应式变量
      userId: null,
      username: ''
    }
  },
  mounted() {
    // 解析当前URL的查询参数
    const query = new URLSearchParams(window.location.search)
    // 数字类型参数需要做类型转换，避免字符串赋值异常
    this.userId = Number(query.get('UserID')) || 0
    this.username = query.get('Username') || ''
  }
}
</script>

关键说明 #

• 首先给两个b-form-input组件绑定v-model响应式变量，实现数据和视图的双向关联
• 组件挂载后通过浏览器原生的URLSearchParamsAPI解析URL查询字符串，直接取出对应参数赋值即可
• 如果你当前项目集成了Vue Router，可跳过手动解析URL的步骤，直接从this.$route.query中获取对应参数值，写法更简洁

内容的提问来源于stack exchange，提问作者patrick96