This time for you to share a solution to the problem of vUE multiple routes sharing a page, write very comprehensive and meticulous, has a certain reference value, this need friends can refer to learn. If there are shortcomings, welcome to criticize and correct.

In daily VUE development we may encounter the need for multiple routes to share a single page, especially when routes are added dynamically and different routes present only different data. Such as:

let routes = [
  {path:"/zhanshan",
  components:Person,
  },
  {path:"/lisi",
  components:Person,
  },
  {path:"/wangwu", components:Person,}]// Welcome to join the front-end full stack development communication circle to learn communication: 864305860Copy the code

In this case, we found that our page actually didn’t load after the first successful load. Has been display page loading data for the first time, to the person at like routing is not effective, and we are through the observation of the changes in the browser address bar to be sure it has nothing to do, and routing, this has just started to use vue students may have a little trouble, actually this cycle and page statement is relevant, This happens because the page loads most of its hook functions (Mounted, computed…). It will not start again, so the page feels no jump. In fact, we do not need to switch pages, we just need to change the data in the page, we can listen to the routing address changes in the page, when the address changes, we will reload the data.

watch:{
 "$route":function(to,from){// The from object contains the current address // The to object contains the destination address // There is also a next parameter // this parameter controls whether the route to jump // If not, can not write next() to allow the route to jump, If so, you must write next(), otherwise the route will not take effect. }// Welcome to join the front-end full stack development communication circle to learn communication: 864305860}Copy the code

The above function is triggered whenever the route changes, and we can reload the page data in this function. If the page structure changes significantly, it is recommended to create a different page. The above problem may be useful to the new introduction of VUE friends, vUE more understanding of the friends please bypass.

conclusion

Thank you for watching, if there are shortcomings, welcome to criticize.

We recommend you a free learning group, which covers mobile application website development, CSS, HTML, Webpack, Vue Node Angular and interview resources. Students interested in web development technology, welcome to join Q group: 864305860, no matter you are small white or Daniel I welcome, and Daniel organized a set of efficient learning routes and tutorials to share with you free, while updating video materials every day. In the end, I wish you all success as soon as possible, get satisfactory offer, fast promotion and salary increase, and walk on the peak of life.