[Vuejs]-What is the difference when visit the link through router-link and reload it by the same URL ? – Vue – Vue Router App

by

0👍

✅

I got the answer,

In my custom StringifyQuery, I mutate the query Object to add square brackets to it key (destinations[]: Hanoi)

And then after that, the router still use that object and show in the next route

That why, when I console.log this.$route.query it shows the edited query (destinations[]: Hanoi)

To fix that, I have to avoid mutating the query object, and that’s all

full code in CodeSandbox

stringifyQuery: (query) => {
        const queryClone = { ...query };

        Object.keys(queryClone).forEach((item) => {
            if (
                Array.isArray(queryClone[item]) &&
                queryClone[item].length === 1 &&
                !item.includes("[]")
            ) {
                queryClone[`${item}[]`] = queryClone[item];
                delete queryClone[item];
            }
        });

        return qs.stringify(queryClone, {
            encode: false,
            indices: false,
            arrayFormat: "comma",
            addQueryPrefix: true,
        });
    },

My lesson: Never mess with an outside object, we have to clone it (deep or shadow base on context) and edit it in the clone version

Leave a comment