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.

Javascript vue-cli vue.js

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;

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

Previous: Mini Program's business domain name is mp.weixin.qq.com

Next: If the baseURL of axios is set to localhost, it can be changed from cookie, to IP, but the backend of cookie, cannot be used, but the cookie can be obtained.

Vue.js realizes the specification selection function of commodity details page.
vue.js implements specification selection on product details page Click to select version option and click to select color option. Highlight has been selected. How to display the selected version and color html Code < div class= "chose-ck " > : ...

Html5 javascript vue-cli vue.js

Feb.27,2021
May I ask where the web page icon (favicon) of the project built by vue-cli was introduced? How can it be removed?
as shown in figure I really can t find it. Ask for help ...

Html5 html javascript vue-cli vue.js

Mar.02,2021
How does the vue destroyed () function change a css style?
in vue, this is a window departure event. I want to change the style of body through this, but it seems to have misreported . how can I change its style? ...

Front-end-framework javascript vue-cli vue.js

Mar.06,2021
Vue has obtained the back-end data, how to wrap it?
HTML get the backend data code ...

Front-end javascript vue-cli vue.js ajax

Mar.08,2021
In vue, how do I set up a function to be executed as soon as the page is loaded?
italic text this is the js code for a page of article details. I would like to ask how to define a function that will be executed as soon as I jump to this page? ...

Front-end front-end-framework javascript vue-cli vue.js

Mar.08,2021
In vs code's vue-cli project, the vetur plug-in is installed, resulting in all * .js formatting in the vue-cli project with 2 spaces?
after vs code installs the vetur plug-in, all the * .js file formats in the vue-cli project are aligned with 2 spaces. I usually use 4 spaces. In the configuration, I set "editor.tabSize ": 4, all files for non-vue projects * .js, * .html,*.css, etc....

Visual-studio-code javascript vue-cli vue.js

Mar.10,2021
How to judge the currently selected item of the array in vue?
is there a boss who can help explain the principle of this line of code? Yesterday, a big guy in the group shared the method. I used it and realized the function, but I don t understand why, which are vue and which are js native nextRoute.indexOf (...

Javascript vue-cli vue.js

Mar.13,2021
Switching between vue Test Environment and formal Environment
beginner vue, builds a project out of scaffolding and adds a "API_ROOT " to "dev.env.js ". The code is as follows use strict const merge = require( webpack-merge ) const prodEnv = require( . prod.env ) module.exports = merge(prodEnv, { N...

Javascript vue-cli vue.js

Mar.14,2021
Under the IE browser, what is the difference between the style of the vue project uploaded to the server and the local style?
in a vue project, the local running code localhost:8080 is different from the server ip address in ie11 browser and 360browser, as follows Local style ie11360 if I click anywhere on the page on the server or move the mouse into the navigation bar ar...

Front-end-framework front-end javascript vue-cli vue.js

Mar.15,2021
After the vue project is packaged, an error is reported under ie: 'SCRIPT1006: missing')''this is true for both ie8,9,10,11
ie 8,9,10,11 Edge...ES6 webpackbabel-polyfill es6 es5 ...

Javascript vue-cli vue.js

Mar.21,2021
How to reference the js method in external links in a vue single page file
my front-end project is built directly using vue scaffolding and vue-cli. At present, I only know that you can import a js file into the .vue page through the import xxx.js file, and then I would like to ask how to introduce the outer chain? I trie...

Web front-end javascript vue-cli vue.js

Mar.21,2021
After the vue project is packaged, the font file reports an error, but the page displays normally
as shown in the figure, this error is reported after the project is packaged. It should be a path error, but I don t know how to correct it . ...

Javascript vue-cli vue.js

Mar.21,2021
What files should vue-cli assets and static put respectively?
what files should vue-cli assets and static put respectively? There are many explanations about assets and static on the Internet, but I feel that there is no concise explanation there are many articles like this, but all I need is where to put some j...

Javascript vue-cli vue.js

Mar.22,2021
The problem of echarts migration map (cross-provincial, transnational, cross-city display is problematic)
there are three migration maps for business demand. Cities in other provinces migrate to Xi an and cities in other countries migrate to Xi an. These two maps have been realized, but the map of other cities in Shaanxi Province migrating to Xi an shows...

Html5 javascript vue-cli vue.js echarts

Mar.22,2021
After the vue project is packaged, there is no icon for the title on the browser?
after the vue project is packaged, there is no icon for the title on the browser? webpack.prod.config.js: const webpack = require( webpack ); const HtmlWebpackPlugin = require( html-webpack-plugin ); const ExtractTextPlugin = require( extract-te...

Javascript vue-cli vue.js

Mar.24,2021
With regard to the switching components of the vue tab and using the same interface, please give us some suggestions.
I have a vue technical question for you. I have a tab tab in the component page that uses: is to dynamically switch components, but both are the same request interface, but I don t want to use the same interface for both components at the same time! Cou...

Vue-router javascript vue-cli vue.js

Mar.28,2021
Watch cannot listen properly after vue is extracted into components
watch in the vue component listens for changes to the formSearch, but if you modify the formSearch.memberPhone while listening, you can t listen. There was no problem with writing it in the page before, but now it is extracted into a component . <te...

Html5 javascript vue-cli vue.js

Apr.09,2021
How to write the left navigation bar of vue project in the form of interface?
as shown in the figure, it is written to death directly. What should I do if I get it in the form of an interface? 1. Send a request to get the first-level menu of the navigation bar, and then send ajax again to get the second-level menu according to ...

Javascript vue-cli vue.js

Apr.29,2021
Is it necessary to split a .vue component with more than 2000 lines into several subcomponents?
this component is the main functional page in the project. Because it is a .vue file, the template,css,js is all written together, which results in more than 2000 lines of code for this component . but the code in this component is basically unreusable...

Javascript vue-cli vue.js

May.08,2021
How to correctly introduce pictures in assets into style in .vue file
if you want to introduce the picture resource in the assets folder in the css in the style in the .vue file, always report an error this is the css, in the style in some vue component. In this way, I can t get the picture resource according to the r...

Javascript vue-cli vue.js

Jul.08,2021