如何用URL查询参数初始化输入框？Vue Router 4.x代码为何无法自动填充？

几个可能的问题及解决办法 #

1. 路由参数解析时机不对 #

你的URL是hash模式（带#），组件初始化阶段route.query可能还没完成解析，onMounted里的赋值操作可能拿不到正确的参数。换成监听路由query的变化会更可靠：

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const testInput = ref(''); // 先初始化为空字符串
const router = useRouter()
const route = useRoute();

// 监听testInput参数变化，组件加载时立即执行一次
watch(() => route.query.testInput, (newVal) => {
  testInput.value = newVal || '';
}, { immediate: true });

function search() {
   router.push({ name: 'Test', query: { testInput: testInput.value } });
}
</script>

2. ref未初始化值 #

你原来的const testInput = ref();没有设置初始值，默认是undefined，可能导致v-model绑定出现异常。改成const testInput = ref('');即可避免这类问题。

3. 路由name必须匹配 #

确认你的路由配置里，当前组件对应的路由name确实是'Test'，不然点击查询按钮跳转时会出错，参数也无法正确传递。

4. 清缓存测试 #

开发过程中浏览器可能缓存旧的路由状态，建议强制刷新页面（Ctrl+F5）或者清空浏览器缓存后再测试，避免旧数据干扰结果。

验证方式 #

修改完成后打开http://localhost/#/?testInput=aaaa，可以在watch回调里加console.log(newVal)查看是否成功获取到参数，同时检查输入框和下方的{{ testInput }}是否同步显示aaaa。

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