On the reference of common header in Vue project

When I write a project, at the beginning, I write the header and footer in each view page file, such as home.vue But later, I found that it would be very cumbersome to write like this, because there are many view files. If each view file needs to be added like this, there will be a lot of duplicate code in the project, and it will be very troublesome to unify the management, so I want to write the header and footer in the app.vue page As shown in the figure, although the problem of duplicate codes is solved, my header has a login and logout function. Logically, when opening a project, I will judge whether there is a cookie value (loginname) on the default page. If not, I will jump to the / login page, and the user name on the right side of the header and the div where the logout button is located will be hidden, as shown in the figure (this is the page after login) ）This is the / login page that I jump to after logging off. The ideal situation is as above, but now there is a problem. When I click log off, although I can jump, the user in the upper right corner is still in place, which seems to be the cache. I have to refresh it before it disappears, as shown in the figure, so I want to ask the boss to solve this problem. Thank you very much!