fix: target link no high in menu

Author: sendya

examples/router.ts

@@ -65,6 +65,12 @@ const routes: RouteRecordRaw[] = [
         meta: { title: 'Single', icon: 'SettingOutlined' },
         component: () => import('./views/page1.vue'),
       },
+      {
+        path: 'http://www.baidu.com/',
+        name: 'baidu_target',
+        meta: { title: '百度一下', target: '_blank' },
+        component: null,
+      },
     ],
   },
 ];

src/SiderMenu/BaseMenu.tsx

@@ -110,7 +110,7 @@ const LazyIcon: FunctionalComponent<{
   icon: VNodeChild | string;
   iconPrefixes?: string;
   prefixCls?: string;
-}> = (props) => {
+}> = props => {
   const { icon, iconPrefixes = 'icon-', prefixCls = 'ant-pro' } = props;
   if (!icon) {
     return null;
@@ -193,12 +193,13 @@ class MenuUtil {
       );
     }
 
-    const menuItemRender = this.props.menuItemRender && withCtx(this.props.menuItemRender, this.ctx)
+    const menuItemRender =
+      this.props.menuItemRender && withCtx(this.props.menuItemRender, this.ctx);
 
     const [title, icon] = this.getMenuItem(item);
 
     return (
-      (menuItemRender && menuItemRender({ item, title, icon }) as VNode) || (
+      (menuItemRender && (menuItemRender({ item, title, icon }) as VNode)) || (
         <Menu.Item
           disabled={item.meta?.disabled}
           danger={item.meta?.danger}
@@ -250,41 +251,44 @@ export type MenuOnSelect = {
   item: VNodeChild | any;
   domEvent: MouseEvent;
   selectedKeys: string[];
-}
+};
 
-export type MenuOnClick={
+export type MenuOnClick = {
   item: VNodeChild;
   key: string | number;
   keyPath: string | string[] | number | number[];
-}
+};
 
 export default defineComponent({
   name: 'BaseMenu',
   props: baseMenuProps,
   emits: ['update:openKeys', 'update:selectedKeys', 'click'],
   setup(props, { emit }) {
-    const ctx = getCurrentInstance()
+    const ctx = getCurrentInstance();
     const menuUtil = new MenuUtil(props, ctx);
     // update iconfontUrl
     watchEffect(() => {
       if (props.iconfontUrl) {
         IconFont = createFromIconfontCN({
           scriptUrl: props.iconfontUrl,
-        })
+        });
       }
-    })
+    });
 
     const handleOpenChange = (openKeys: string[]): void => {
       emit('update:openKeys', openKeys);
     };
     const handleSelect = (args: MenuOnSelect): void => {
+      // ignore https? link handle selectkeys
+      if (isUrl(args.key as string)) {
+        return;
+      }
       emit('update:selectedKeys', args.selectedKeys);
     };
     const handleClick = (args: MenuOnClick) => {
       emit('click', args);
     };
 
-
     return () => {
       return (
         <Menu
@@ -301,7 +305,7 @@ export default defineComponent({
         >
           {menuUtil.getNavMenuItems(props.menuData)}
         </Menu>
-      )
+      );
     };
   },
 });

src/utils/getMenuData.ts

@@ -1,4 +1,5 @@
 import type { RouteRecordRaw } from 'vue-router';
+import isUrl from './isUrl';
 
 export { clearMenuItem, flatMap, getMenuFirstChildren } from './index';
 
@@ -14,6 +15,11 @@ export const formatRelativePath = (
 ): RouteRecordRaw[] => {
   // 计算路由绝对路径
   return routes.map(route => {
+    // startWith : http | https
+    if (isUrl(route.path)) {
+      return route;
+    }
+
     // Note that nested paths that start with / will be treated as a root path.
     // This allows you to leverage the component nesting without having to use a nested URL.
     // @ref https://router.vuejs.org/guide/essentials/nested-routes.html#nested-routes