Wait for any in-progress router navigation to finish #1990
Unanswered
vincerubinetti
asked this question in
Help and Questions
Replies: 1 comment
-
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 |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I'm trying to write a simple "useURLQueryParam" hook like this:
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 awaitrouter.push
, but that only refers to the specific push in scope; I need to await any router pushes, application-wide.flush
options in my watchers.await nextTick()
.Maybe I can somehow use
router.afterEach
for this...Beta Was this translation helpful? Give feedback.
All reactions