Vue's ideas on sliding switching?

First picture above:

If you want to click tab to switch page content, or active page to switch tab, many ui components can do it. Today I want to discuss how to switch tabs by sliding like WeChat, which can both slide left and right, and slide one page up and down without affecting the scroll position of other pages. If you use ui components, the subpages are all in a div. Although you can slide left and right, as long as there is one page scrolling up and down, all pages will scroll to the same height. Browse related blogs or plug-ins made on GitHub. The general idea is: sub-pages are switched in one, and they have their own routes, just like a single page. So the respective scroll height should not be affected. Next, how to make the switching effect of different routes occur, the vue official website introduces the transition effect, use transition. The page sliding switch uses vue-touch, which is a relatively simple sliding switch component. Let the page scroll a certain distance and slide the page left and right to return to the original page, or keep the scrolled height, use keep-alive. The idea is probably like this. My demo is on GitHub: https://github.com/520zzj/router-swipe, this is a demo where vue slides left and right to switch tabs. The demo is complete and can be used after downloading. If an error is reported, npm install first, then run it. The transition effect is not good, and there is a problem with the use of keep-alive, which leads to the inability to achieve the cache effect. I hope there will be some advice from the passing gods. In the figure, the first one is to click on the tab to switch the page content, and the latter is to slide the content to switch the tab. It is rough, and I hope that God can help optimize it.