Solution to how vue-router responds to changes in routing parameters

The content of this article is about the solution for vue-router to respond to changes in routing parameters. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. As a reminder, when using routing parameters, such as navigating from /user/foo to /user/bar, the original component instance will be reused. Because both routes render the same component, reuse is more efficient than destroying and recreating it. However, this also means that the component's lifecycle hook will no longer be called.
Only the parameters of the route have changed, and the route will not be refreshed by default.
In order to solve this problem
If you don’t want to reuse it, add a key to the router-view of the parent component
< ;/router-view>

2. It’s the white screen problem of vue-router IOS. This is really annoying.
Problem description:

Enter page A——> ;B page——>The return that comes with ios——>White screen appears——>Manually click on the white screen——>Problem solution

Cause analysis:

In When using webview to develop a Vue project on an ios machine, go history(-1) cannot pull down the height of the body, causing it to be covered. Only by triggering a light click can the mask be removed.

Solution implementation principle:

html, body are both 100%, #app supports the notification of the parent element, but the default scroll scroll of the browser is not #app, but body. Some factors make it impossible to restore after returning to history. (ios fault), for this reason, we absolutely positioned #app and made it the object of scroll again, thereby solving the problem

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
#app {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  left:0;
  top:0;
}

#app 是父节点，最外层的container。根据具体情况而定

The above is the detailed content of Solution to how vue-router responds to changes in routing parameters. For more information, please follow other related articles on the PHP Chinese website!