Mi objetivo es mostrar un brindis de Bootstrap cuando navego a una página con parámetros de consulta de enrutador específicos. Estoy usando Vue 3/Vue-Router 4/Bootstrap 5.

El brindis no se muestra la primera vez después de cargar la aplicación Vue y navegar a la ruta con parámetros de consulta coincidentes. Después de la primera vez, el brindis aparece constantemente como se esperaba al navegar a la ruta con los parámetros mencionados.

Este es el HTML (en Vue <template> ) del Toast:

 <div ref="toast" class="toast align-items-center position-absolute top-0 start-50 translate-middle-x fade hide" :class="['bg-' + toastType, 'text-' + textColorForBackground(toastType)]" role="alert" aria-live="assertive" aria-atomic="true" > <div class="d-flex"> <div class="toast-body text-center"> {{ toastMsg }} </div> </div> </div>

Así es como estoy leyendo los parámetros de consulta y mostrando el brindis:

 watch(() => route.query, () => { if (route.query.toast) showToast(route.query.toast, route.query.toastType); }); const toast = ref(null); const toastMsg = ref(''); const toastType = ref('light'); const showToast = (msg, type = 'light') => { toastMsg.value = msg; toastType.value = type; const bsToast = bootstrap.Toast.getOrCreateInstance(toast.value); bsToast.show(); router.replace({ ...router.currentRoute, query: { ...router.currentRoute.value.query, toast: undefined, toastType: undefined } }); };

Así es como uso el brindis al navegar:

 router.push({ path: '/path', query: { toast: 'Message', toastType: 'success' } });

El método showToast parece funcionar correctamente la primera vez después de cargar la página, como se muestra en mi depuración. Es por eso que creo que hay un problema al mostrar el brindis de arranque.