How to realize the Hidden component dynamically displayed by vue

want to implement a single-page application managed in the background. It is known that red, blue and black are three different components, and their structure and page are as follows

clipboard.png

clipboard.png

li

clipboard.png
do you need to use vue-router in this case?
vue beginner rookie, ask for advice

Mar.16,2021

1. If the black parts are all the same, it would be nice to pass a parameter difference
2. If the black parts are very different and cannot be shared, then dynamic components. There is no need to change routes for this label switching

<component v-bind:is="currentTabComponent"></component>

https://github.com/iview/ivie. you can download a project

Menu