How to load / unload components introduced in App.vue and < router-view/ > at the same time

as shown in the figure, I have header and footer two common components, which are introduced in app.vue. Now there is a problem that when I refresh the page, the code in router-view will be unloaded and reloaded, but header and footer in app.vue will not be unloaded

.

as a result, when my page is refreshed, there will be a short time when there is only header and footer on the whole page

I know that introducing header and footer in each component, but not in app.vue, can solve this problem, but I don"t think it"s a good idea to introduce header and footer in each component. For example, if there are dozens of pages, you can"t introduce each one. This should not be the right way to deal with it.

Jun.03,2021

default header and footer are hidden, and then displayed after the router-view is loaded.
modified the code to delete the next (); global guard does not accept the next () function

router.afterEach((to, from) => {
    showHeader = showFooter = true;
})

attach a sequence of routing guards and lifecycle execution, this of components cannot be used in afterEach;
clipboard.png


I have a little idea here. I hope I can find a better solution and help you by throwing a brick into this person .

  • named view : ide/essentials/named-views.html" rel=" nofollow noreferrer "> Link gives a whole router-view to the header and bottom, with only one component in it
  • add a global loading to give the page a transitional effect, so the user experience should be better!

named-views is really suitable for this kind of, to the same level

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be59bc-31775.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be59bc-31775.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?