background:
vue project stores an object acquired through the interface in vueX
after entering page A, console.log (vueX object) is normally available for output
but after pressing F5 or refreshing the page with a browser, console outputs an empty
.but if you use the route refresh method console can be output
The method ofoutput is written in the created hook function
what"s the difference between these two refreshes? in addition, if you want to monitor vuex, it"s best to listen
. first of all, the subject needs to understand why vue and vue-router are used to build a single-page application.
the second thing to understand is the difference between a single page application and a traditional page.
so a single-page routing jump is a no-refresh jump. On the surface, it looks like an app application, just like the tab tab you wrote. All the data is still in memory, and the page is not overloaded.
What does theF5 refresh do? reload the page, destroy all the previous data, some data you write in the declaration cycle of some builds, press F5 to refresh with url, those components that load the data may not be loaded at all, the life cycle is not running, where does the data come from
after F5 refresh, the data stored in vuex's state will be initialized. If you want to save it, you can listen to window's reload event and copy a copy of state's data into sessionstroage. I haven't tried, this is just my idea. No, no offense.
F5 refresh is equivalent to re-request page
Router refresh, recreate routing page
the hook provided by the route to listen
Previous: Web font problem
if I go to the background to query the details according to the id in the created method of the component, it can be displayed normally without reporting an error, but when the id value of the parent component is changed, it will not be again....
now there is a demand like this: click on an item in the commodity list (figure 1), and you will get the id, of the product and then pass it into the commodity details interface (figure 2). After receiving the id of the commodity, the commodity details ...
the effect you want to achieve is that if you enter your own address: localhost:8080 detail detail can jump to the current address of localhost:8080 detail detailInfo, but the content is still the content under localhost:8080 detail detail path: impor...
after refreshing the page, only the parameters of the index received by the parameter id, are lost. What s going on. ...
1. There is a data content [ axiaxiajiaoyuzhong ] content is dynamic [more than 5] when a screen displays only one element in the array and changes the content when it slides on the screen. How should I write this? If you use rotation, do you have any...
The project is based on the background management developed by vue, which needs to be controlled by permission classes. The backend says that he will control it. The login has the route requested from the page that can be accessed according to the accou...
there are three levels of nested routes, they are logically nested, but there is no nesting on the view, the following part of the route { path: finance , component: _import( layout ), meta: { title: }, children: [ {...
after reading many articles, the skeleton screen is applied to the first screen rendering. Generally, the skeleton screen is rendered on the-sharpapp node of the index.html page of vue, so once the first screen rendering is completed, the skeleton screen...
Is there an abstract route similar to that in angular in vue-router? { path: children:[ { { path: demo foo component:foo }, { path: demo bar ...
When the a page switches to another page, the path changes, but the page content appears very slowly bforce, c, and other pages jump toward a page with normal speed the jump between the pages of brecincec li d, the speed is normal < ref > could...
is to get the element with router-link-active class name, which can be obtained through dom operation. I would like to ask if there is a vue method? created() { this.$nextTick(() => { let activeElement = document.querySelector( .r...
problem description the project writes the route in vue-router. Both the first-level route and the second-level route use the same sub-component. At present, the first-level route can transmit data to the sub-component, but when you click on the secon...
problem description the environmental background of the problems and what methods you have tried related codes Please paste the code text below (do not replace the code with pictures) what result do you expect? What is the error message a...
newcomers are just beginning to learn vue + webpack, to build their own step by step. After running the page, the compilation did not report an error, and the page did not report an error. It seems that the vue instance has been created successfully. Th...
that s the question! mixed development, embed the vue single page that I wrote through webview, but found that $router.go (- 1) is invalid and can t be used, but I have no problem in Android and browser ...
how to upload the Vue project to GitHub to realize the preview function is it only necessary to upload the dist file? what if the cart.json data cannot be read when the dist file style fails? ...
fallback is a common function, so I encapsulated it as a global function assetes global.js import Vue from vue import Router from "vue-router"; Vue.use(Router) export default({ back:function(){ this.$router.go(-1); ...
A home page that needs to distinguish between multiple countries the current directory is like this index_countrytNameindex _countryName.vue the route country in this place can be empty. what s the difference? ...
if the page jump looks like this: A page B page C page B page B page C page then when I click back, I will fall into the previous action C page "B page " B page "A page this affects the user experience very much, how to solve this problem gen...
existing: has the following pages: app.vue, a.vue, b.vue, Bread crumb navigation requirements app > a > b; a b page has strong reusability and is equal in router question: how to dynamically generate breadcrumb navigation when using neste...