Vue-cli component Partition problem

use vue to do such a page under Jinri Toutiao, how to divide the components? The tab at the top of
is a non-routing component, and there is no problem if it is placed in the components folder. The navigation tab at the bottom of
is the same as the top, and it is no problem if it is placed in the components folder.
the problem is the content list in the middle, and the style is the same. Do you need to make different routing components and put them in the pages folder? Can"t it be reused?

clipboard.png

May.15,2021

 

actually do the following navigation for route jump
router-view show different pages
and then switch for tab above

.


I think the middle component only receives different data, it should also be a common component stored in the components folder, and the special functions can be defined by props. If you divide it in a little more detail, you can extract each news display as a public component

.

clipboard.png

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2ae4f-2ba57.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2ae4f-2ba57.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?