In the original primevue freya source in App.vue there is the following code:
Code: Select all
watch: {
$route() {
this.menuActive = false;
this.$toast.removeAllGroups();
},
},
Code: Select all
const route = useRoute();
const toast = useToast();
watch(
() => route,
() => {
menuActive.value = false;
toast.removeAllGroups();
}
);
To solve the possible problems I would suggest the following composition API code:
Code: Select all
const route = useRoute();
const toast = useToast();
watch(
() => route.fullPath,
() => {
menuActive.value = false;
toast.removeAllGroups();
}
);
quote from the vue router manual:
Note: it might be, that the problem exists only with composition api, I did not test the old api.The route object is a reactive object, so any of its properties can be watched and you should avoid watching the whole route object. In most scenarios, you should directly watch the param you are expecting to change
Note2: I don't know the exact trigger of the problem. In one case I added a query parameter to the current route in an other case i changed the text of a component inside the freya left side menu.
As a search engine trigger:
In the chrome dev console a warning appears, that helped me to find the source of the vue 3 performance problems with the freya layout:
This warning seems to come from a 'window' object within 'route'.[Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.