Ich habe ein Problem: Beim Wechseln zwischen Komponenten mithilfe von router.push wird die Toast-Benachrichtigung nicht angezeigt. Ich habe eine Benutzerbearbeitungsansicht und möchte nach der Bearbeitung zum Profil des Benutzers umleiten und sofort eine Toastbenachrichtigung anzeigen.

Grob gesagt habe ich Folgendes:

Routes.js

import { createRouter, createWebHistory } from 'vue-router';

//Modules
import DashboardIndex from './components/modules/dashboard';
//Users
import UsersIndex from './components/modules/users';
import UsersCreate from './components/modules/users/create';
import UsersEdit from './components/modules/users/edit';
import UsersView from './components/modules/users/view';


export default new createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', name: 'dashboard.index', component: DashboardIndex },
        { path: '/users',  name: 'users.index', component: UsersIndex},
        { path: '/user/create',  name: 'user.create', component: UsersCreate},
        { path: '/user/edit/:id',  name: 'user.edit',  props: true, component: UsersEdit},
        { path: '/user/:id',  name: 'user.view',  props: true, component: UsersView},
    

    ]
})

Combinable/user.js

import axios from 'axios';
import { useRouter } from 'vue-router'
import { useToast } from 'primevue/usetoast';

export default function useUsers() {

    const users = ref([])
    const user = ref([])
    const errors = ref([])
    const router = useRouter()
    const toast = useToast()
    /**
     * 
     * All Users
     * 
     */
    const getUsers = async () => {
       const response = await axios.get('/admin/users')
       users.value = response.data
    }
    /**
     * 
     * Create User
     * 
     */
    const storeUser = async (data) => {
        try {
            let response = await axios.post('/admin/user', data)
            await router.push({ name: 'user.view',  params: { id: response.data.id } })
        } catch (e) {
            if (e.response.status === 422) {
                errors.value = e.response.data.errors    
            }
        }
 
    }
    /**
     * 
     * Create User
     * 
     */
     const updateUser = async (id) => {
        try {
            //this.showToast = true;
            let response = await axios.put(`/admin/user/${id}`, user.value)
            router.push({ name: 'user.view',  params: { id: response.data.id } })
            toast.add({severity:'success', summary: 'Éxito', detail: 'El Usuario ha sido modificado', life: 3000})
        } catch (e) {
            if (e.response.status === 422) {
                errors.value = e.response.data.errors    
            }
        }

    }
     /**
     * 
     * View User
     * 
     */
    const showUser = async (id) => {
        let response = await axios.get(`/admin/user/${id}`)
        user.value = response.data

    }
 
    /**
     * 
     * Delete User
     * 
     */
    const destroyUser = async (id) => {
        await axios.delete(`/admin/user/${id}`)
    }
     

    return {errors, users, user, getUsers, storeUser, updateUser, showUser, destroyUser}

}

View.vue

<template>
  <div class="container-fluid">
    <Toast position="bottom-right"/>
USER PROFILE
                </div>
</template>
<script>
    import useUsers from '../../../composables/users'
    import { onMounted } from 'vue';

    export default {
        props: {
            id: { required: true }
        },
     
        setup(props) {

            const { user, showUser } = useUsers();

            const showUserMounted =  async () => {
                await showUser(props.id)
            }
            onMounted(showUserMounted)
           
            return { user }
        }
    }
    </script>

Wichtige Tatsache: Ich verwende Prime VUE.

Außerdem habe ich kommentiert, dass, wenn ich zu toast.add({severity:'success', Summary: 'Success',detail: 'The User has been Modified', life: 3000}) in showUser gehe, Toast angezeigt werden kann Nachrichten schön.