I received a request today to redirect two urls to the same page, that is, to the same component. Record it so you don’t forget it later:
Requirements: Sales orders are divided into "orders in progress" and "orders completed". Before, there were two vue components and two pages. Now I want to merge them into one, but the displayed data are different (in progress and completed respectively orders).
step:
1. First modify the corresponding components in the route:
change into:
In this way, the corresponding relationship is corresponding! but! There is still a problem, that is, if the modification is simple, the page will not be refreshed when the page jumps, and the vue lifecycle hook function will not be called, that is, the data will not change, which is not what we want. So there is a second step:
2. There are two ways to achieve page refresh:
1) The first is to add: key attribute in App.vue
Now the page can be refreshed and the hook function is called. (Actually, this kind of global implementation is not very good. If you have time to study it, use watch to realize it). When the hook function is called, you can do whatever you want~~~
2), using method 1) will affect the navigation bar, and the navigation bar will be refreshed every time. So not good. I modified it a bit, and added routing monitoring to the watch in the component:
The same can be achieved!
3. Since it is the same component, how to judge which url is called? It can be obtained with window.location.href. So... Dangdangdang, you are the boss now!