在Ant Design Vue Pro（Ant Design Pro for Vue）中，要实现菜单项点击后在新标签页打开外链，您通常需要在配置菜单时指定链接（href）并设置特定属性来控制打开方式。
假设您是在使用ProLayout组件进行菜单配置，并且某个菜单项是一个外部链接，那么可以在路由配置或者menuData中按照以下方式进行设置：
代码语言：javascript复制// 菜单数据示例
const menuData = [
{
name: '外部链接',
icon: 'external-link', // 图标（可选）
href: 'http://www.example.com', // 外部链接地址
target: '_blank', // 添加这个属性表示在新标签页打开
},
// ...其他菜单项
];
// 在Ant Design Pro Vue中可能通过layout组件传递给ProLayout
<ProLayout>
// ...
:menuData="menuData"
</ProLayout>在HTML标准中，target="_blank" 属性会让链接在新的浏览器窗口或标签页中打开。当您将此属性应用到菜单项的href属性上时，点击该菜单就会在新标签页中打开指定的外部链接了。
在JSX中，您可以根据上述逻辑编写一个返回元素的函数或直接在组件render方法中处理。这里是一个示例：
代码语言：javascript复制import { Link } from 'vue-router'; // 或者是您项目中实际使用的路由Link组件
function renderItem(item) {
const meta = Object.assign({}, item.meta);
const target = meta.target || null;
const hasRemoteUrl = /^http(s)?:///.test(item.path); // 假设httpReg是匹配http/https的正则表达式
let CustomTag;
let props;
let attrs;
if (hasRemoteUrl || target) {
CustomTag = 'a';
attrs = {
href: item.path,
target: target || '_blank', // 如果target为null，则默认新标签页打开
};
} else {
CustomTag = Link;
props = { to: { name: item.name } };
}
return (
<CustomTag {...attrs} {...props}>
{/* 这里放置菜单项的内容 */}
{item.name}
</CustomTag>
);
}
// 在需要渲染菜单的地方使用
return (
<div>
{menuData.map(item => (
<li key={item.name}>
{renderItem(item)}
</li>
))}
</div>
);请注意，Vue Router的<router-link>组件并不会接受href属性，而是通过to属性来指定目标路由。当判断条件为内部链接时，我们使用<router-link>并设置to属性；否则，我们使用原生<a>标签并设置href属性。同时，为了确保外部链接能在新标签页打开，我们在目标（target）属性上做了相应处理。
