vue路由跳转问题？-灵析社区
来自武功山的爱const newRoute = { path: '/new-route', component: () => import('@/views/helpPreview/index.vue'), }; this.$router.addRoute(newRoute); this.$router.push({path: '/new-route', query:{item:item}}) 在组件内部新增路由，并且跳转到这个路由，在vue系统的路由标签页中显示组件，为什么这种方式不显示呢？ vue系统标签页 
半寸时光爱思考试试这个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;
}
}
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241222/3837483e354550fd127847bb769c7814.png)
============我是分割线==================
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241222/da9be707bc798c49f59c7c47199bc358.png)