Wait for any in-progress router navigation to finish

[vincerubinetti]

I'm trying to write a simple "useURLQueryParam" hook like this:

import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { sleep } from "@/util/misc";

const stringParam = {
  parse: (value) => value || null,
  stringify: (value) => value,
};

// reactive variable synced with a url param
// no good third party solution exists for this, so write our own basic version
// see https://github.com/vueuse/vueuse/issues/3398
export function useUrlParam(name, defaultValue = "", type = stringParam) {
  const variable = ref(defaultValue);
  const router = useRouter();
  const route = useRoute();

  // when variable changes, update url
  async function write() {
    // wait for other router pushes to finish, so route.query is up to date. needed when multiple useParams are set simultaneously, e.g. when first loading the page.
    await sleep(); // (just a simple awaited setTimeout of 0 ms)
    const params = new URLSearchParams(route.query);
    const value = type.stringify(variable.value);
    if (value) params.set(name, value);
    else params.delete(name);
    const query = Object.fromEntries(params.entries());
    await router.push({ query });
  }
  watch(variable, write, { immediate: true });

  // when url changes, update variable
  function read() {
    const value = type.parse(route.query[name]);
    if (value !== null) variable.value = value;
  }
  watch(() => route.query[name], read, { immediate: true });

  return variable;
}

However, I don't like the await sleep() I have to do to wait for any other route pushes to finish. Is there a more correct way to do this?

Things I've tried:

• await router.isReady(). Apparently this is only for the initial setup of the router? I think I'm looking for a version of this where it waits for any in progress navigation to finish. And I know you can await router.push, but that only refers to the specific push in scope; I need to await any router pushes, application-wide.
• Different flush options in my watchers.
• await nextTick().

Maybe I can somehow use router.afterEach for this...

[vincerubinetti]

This is an alternative I came up with that seems to work so far:

import { shallowRef, watchEffect } from "vue";
import { useUrlSearchParams } from "@vueuse/core";

// reactive variable synced with url params, as object of strings
const params = useUrlSearchParams("history"); // only supports replace, not push

// generic param type
type Param<T = unknown> = {
  defaultValue: T;
  parse: (value: string) => T | null;
  stringify: (value: T | null) => string;
};

// param treated as string
export const stringParam: Param<string> = {
  defaultValue: "",
  parse: (value) => value || null,
  stringify: (value) => String(value),
};

// reactive variable synced with a selected specific url param
// no good third party solution exists for this, so write our own basic version
// see https://github.com/vueuse/vueuse/issues/3398
export function useUrlParam<T>(
  name: string,
  { defaultValue, parse, stringify }: Param<T>,
) {
  // https://github.com/vuejs/composition-api/issues/483
  const variable = shallowRef(defaultValue);

  // when url changes, update variable
  watchEffect(() => {
    const param = params[name] || "";
    const value = parse(Array.isArray(param) ? param.join() : param);
    if (value) variable.value = value;
  });

  // when variable changes, update url
  watchEffect(() => {
    const value = stringify(variable.value);
    if (value) params[name] = value;
    else delete params[name];
  });

  return variable;
}

I think because params is now a single reactive variable, changes to it are synchronous and/or batched together before a navigation happens. I think this is actually better too, because it doesn't add extra unneeded history entries.