Vue.js页面刷新后根据URL参数保留下拉框选中值（Laravel环境）

在Laravel项目中开发下拉选择组件，预期实现逻辑：

• 用户选择下拉选项后，将选中的size值同步更新到URL查询参数
• 用户刷新页面时，若URL携带size查询参数，下拉框默认选中该参数对应选项

实际异常表现：选中下拉值后刷新页面，下拉框被重置为空选状态，无法保留之前的选中值。

问题相关代码 #

下拉组件原代码 #

<template>
<div class="mt-2">
           
            <select class="form-control" v-model="filter.size">
                <option value="">............</option>
                <option value="big">Big</option>
                <option value="small">Small</option>
            </select>
        </div>
<!-- 原代码此处存在书写错误，误写为开标签<template> -->
<template>
<script>
    
export default {
    data() {
        return {
            
            filter: {
                size: this.$route.query.size,
     
            },
        };
    },

    mounted() {
  
    },

    watch: {
        filter: {
            handler() {
                this.$router.push({
                    query: this.filter,
                });
            },
            deep: true,
        },
    },
};
</script>

路由配置原代码 #

routes: [

    {
        path: '/home',
        component: App,
        name: App,
    
    },
],

视图中组件注册代码 #

<div class="card-body">
         <search> </search>
   </div>

• 模板语法错误：组件模板末尾的闭合标签误写为开标签<template>，会导致Vue解析组件模板异常，初始值绑定失效。
• 初始值赋值时机错误：在data()函数中直接通过this.$route.query.size取URL参数，此时Vue组件实例未完成初始化，路由实例未完成挂载，无法稳定获取URL上的查询参数，导致filter.size初始值为空，自动匹配到第一个空选项。
• 监听器逻辑缺陷：深度监听filter时没有做触发来源判断，初始化赋值时如果触发监听，会反复执行路由跳转，甚至冲掉地址栏原有参数。

• 修正模板闭合标签的书写错误。
• 把URL参数的赋值逻辑移到created生命周期钩子中执行，此时组件实例、路由实例都已完成初始化，可以稳定拿到URL查询参数。
• 优化监听器逻辑，直接监听filter.size字段，增加值比对判断，避免初始化赋值时触发无意义的路由跳转，同时跳转时保留URL上已有的其他查询参数，避免参数被覆盖。
• 若使用Vue Router的history模式，确认Laravel路由配置了兜底规则，将所有前端路由请求转发到渲染Vue应用的Blade模板，避免带参数刷新触发404。

修复后的组件代码 #

<template>
<div class="mt-2">
    <select class="form-control" v-model="filter.size">
        <option value="">............</option>
        <option value="big">Big</option>
        <option value="small">Small</option>
    </select>
</div>
</template>
<script>
export default {
    data() {
        return {
            filter: {
                size: ''
            },
        };
    },
    created() {
        // 初始化时从URL读取参数赋值
        if (this.$route.query.size) {
            this.filter.size = this.$route.query.size
        }
    },
    watch: {
        'filter.size'(newVal) {
            // 仅当选中值和当前URL参数不一致时才跳转，避免死循环和无效跳转
            if (newVal !== this.$route.query.size) {
                this.$router.push({
                    query: {
                        ...this.$route.query,
                        size: newVal
                    }
                })
            }
        }
    },
};
</script>

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