试试这个demo,我从element-ui官网借鉴写的: [https://element.eleme.cn/#/zh-CN/component/tabs](https://link.segmentfault.com/?enc=FOMEdXRGd0wkGRuO1jhnYQ%3D%3D.9Xjb8NMVFO%2BItcdSxMGpsHmcq2SJcUVUWP1KTHXJ%2F6Y%2BIvFhaCdPWsSwyiGFFgJA) export default { data() { return { editableTabsValue: '2', editableTabs: [{ title: 'Tab 1', name: '1', content: 'Tab 1 content' }, { title: 'Tab 2', name: '2', content: 'Tab 2 content' }], tabIndex: 2 } }, methods: { handleTabsEdit(targetName, action) { if (action === 'add') { let newTabName = ++this.tabIndex + ''; this.editableTabs.push({ title: 'New Tab', name: newTabName, content: 'New Tab content' }); this.editableTabsValue = newTabName; } if (action === 'remove') { let tabs = this.editableTabs; let activeName = this.editableTabsValue; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName) { let nextTab = tabs[index + 1] || tabs[index - 1]; if (nextTab) { activeName = nextTab.name; } } }); } this.editableTabsValue = activeName; this.editableTabs = tabs.filter(tab => tab.name !== targetName); } }, goToNewRoute() { let router = this.$router; const newRoute = { path: '/new-route', component: () => import('@/views/index.vue'), }; router.addRoute(newRoute); let newTabName = ++this.tabIndex + ''; this.editableTabs.push({ title: '我是新增路由的标签标题', name: newTabName, }); this.editableTabsValue = newTabName; router.push({ path: '/new-route', query: { item: "参数值" } }); } } } {{ item.content }} 点我去新增路由 h1 { font-weight: 500; font-size: 2.6rem; top: -10px; } h3 { font-size: 1.2rem; } .greetings h1, .greetings h3 { text-align: center; } @media (min-width: 1024px) { .greetings h1, .greetings h3 { text-align: left; } }  ============我是分割线================== 