Vue implements the method that can have multiple router-views on the same page

When using Vue+Element to build a project, in order to avoid one page being too large, divide the content in the tab into multiple pages and display it using the same-level view

&lt;el-tabs v-model="activeName" @tab-click="handleClick"&gt;
   &lt;el-tab-pane label="User Details" name="first"&gt;
   &lt;router-view&gt;&lt;/router-view&gt;
   &lt;/el-tab-pane&gt;
   &lt;el-tab-pane label="User Group" name="second"&gt;
   &lt;router-view name="second"&gt;&lt;/router-view&gt;
   &lt;/el-tab-pane&gt;
   &lt;el-tab-pane label="User Permissions" name="third"&gt;
   &lt;router-view name="third"&gt;&lt;/router-view&gt;
   &lt;/el-tab-pane&gt;
   &lt;el-tab-pane label="User Information" name="fourth"&gt;
   &lt;router-view name="fourth"&gt;&lt;/router-view&gt;
   &lt;/el-tab-pane&gt;
   &lt;el-tab-pane label="Department Information" name="fifth"&gt;
   &lt;router-view name="fifth"&gt;&lt;/router-view&gt;
   &lt;/el-tab-pane&gt;
  &lt;/el-tabs&gt;

Define a name for router-view, and the default display does not need to be defined.

Then define components in the route,

path: '/admin/userManagement/userNew/userShow',
components: {
 default: AdminUserShow,
 second: AdminUserGroup
}

The default displayed name iscomponentsDefined as default

Details can be viewedOfficial Documentation

The above method of implementing the same page of vue can have multiple router-views is all the content I share with you. I hope you can give you a reference and I hope you can support me more.