在Ant Design Vue Pro(Ant Design Pro for Vue)中,要实现菜单项点击后在新标签页打开外链,您通常需要在配置菜单时指定链接(href)并设置特定属性来控制打开方式。
假设您是在使用ProLayout组件进行菜单配置,并且某个菜单项是一个外部链接,那么可以在路由配置或者menuData中按照以下方式进行设置:
// 菜单数据示例 const menuData = [ { name: '外部链接', icon: 'external-link', // 图标(可选) href: 'http://www.example.com', // 外部链接地址 target: '_blank', // 添加这个属性表示在新标签页打开 }, // ...其他菜单项 ]; // 在Ant Design Pro Vue中可能通过layout组件传递给ProLayout
// ... :menuData="menuData"
在HTML标准中,target="_blank" 属性会让链接在新的浏览器窗口或标签页中打开。当您将此属性应用到菜单项的href属性上时,点击该菜单就会在新标签页中打开指定的外部链接了。
在JSX中,您可以根据上述逻辑编写一个返回元素的函数或直接在组件render方法中处理。这里是一个示例:
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 ( {/* 这里放置菜单项的内容 */} {item.name} ); } // 在需要渲染菜单的地方使用 return (
{menuData.map(item => (
{renderItem(item)}
))}
);
请注意,Vue Router的组件并不会接受href属性,而是通过to属性来指定目标路由。当判断条件为内部链接时,我们使用并设置to属性;否则,我们使用原生标签并设置href属性。同时,为了确保外部链接能在新标签页打开,我们在目标(target)属性上做了相应处理。
领取专属 10元无门槛券
私享最新 技术干货