Laravel Inertia Vue3 过滤数据时移除URL查询参数方案

组件内实现代码 #

通过Inertia的useForm创建过滤表单实例，监听过滤条件变化发起数据请求，同时在请求钩子中调用移除查询参数的方法：

const filterCategory = useForm({ categories: "" });
const filterUnit = useForm({ unit: "" });

// 监听分类过滤条件变化
watch(
    () => filterCategory.categories,
    () => {
        const params = { categories: filterCategory.categories };
        filterCategory.get(route("products.index", params), {
            preserveScroll: true,
            onStart: () => rmQueryParams(),
            onSuccess: () => rmQueryParams(),
        });
    }
);

// 监听单位过滤条件变化
watch(
    () => filterUnit.unit,
    () => {
        const params = { unit: filterUnit.unit };
        filterUnit.get(route("products.index", params), {
            preserveScroll: true,
            onBefore: () => rmQueryParams(),
            onProgress: () => rmQueryParams(),
            onSuccess: () => rmQueryParams(),
        });
    }
);

移除查询参数工具函数 #

利用浏览器history.replaceState修改历史记录，直接移除URL中的查询参数：

export const rmQueryParams = () => {
    window.history.replaceState(
        {},
        document.title,
        window.location.pathname
    );
};

效果展示 #

• 过滤前URL：http://blog.zik/products?categories=9bfbca82-3cba-43b8-be60-759d8736c085
• 过滤后URL：http://blog.zik/products

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