Solve the problem of multiple Vue routes sharing one page

Below I will share with you an article that solves the problem of multiple Vue routes sharing one page. It has a good reference value and I hope it will be helpful to everyone.

In daily vue development, we may encounter the need for multiple routes to share a page, especially when routes are added dynamically. Different routes display only different data and nothing else changes. For example:

let routes = [
  {path:"/zhanshan",
  components:Person,
  },
  {path:"/lisi",
  components:Person,
  },
  {path:"/wangwu",
  components:Person,
  }
]

In this case, we found that our page will not load again after it is loaded successfully for the first time. Therefore, the page always displays the data loaded for the first time, which gives people the impression that the routing has not taken effect. However, by observing the changes in the browser address bar, we can confirm that this has nothing to do with routing. This is very useful for students who have just started using Vue. It may cause a little trouble. In fact, this is related to the life cycle of the page. The reason why this happens is because most of its hook functions (mounted, computed...) will not start again after the page is loaded, so As a result, the page feels like there is no jump.

This kind of business requirement is actually easier to handle. In fact, we don’t need to switch pages. We only need the data in the page to change. We can monitor the change of the routing address in the page. When the address When it changes, we reload the data.

watch:{
 "$route":function(to,from){
   //from 对象中包含当前地址
   //to 对象中包含目标地址
   //其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
 }
}

The above function will be triggered whenever the route changes. We can reload the page data in this function. If the page structure changes significantly, it is recommended to create a separate new page.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use EL expressions to obtain context parameter values ​​in JS

JS moves the left list to the right List function

Use of el expression in js and non-empty judgment method

The above is the detailed content of Solve the problem of multiple Vue routes sharing one page. For more information, please follow other related articles on the PHP Chinese website!