elementUI的el-menu组件做内部组件和外链区分

场景：左侧菜单栏的菜单项有内部组件切换，也会有点击后进入外链的情况，如何同时处理这种情况？

解决思路：

1. 在路由配置中path代表组件切换路径或者外链配置
2. el-menu-item显示菜单项时，使用动态路由形式，判断如果是组件切换，使用is为router-link组件，to为path，如果是外链，使用a标签形式，path为href即可；
3. 如果判断是否为外链，正则匹配是否以/^(https?:|mailto:|tel:)/.test(path)即可

路由配置：

{
	// 'path': '/activity',
	'path': 'https:www.baidu.com',
	'name': 'activity',
	'component': Activity
}

AppLink封装：插槽形式显示el-menu-item

<script>
import { Validator } from "@bigbighu/cms-utils";
export default {
  name: "AppLink",
  props: {
    to: {
      type: String,
      required: true
    }
  },
  methods: {
    isExternalLink(url) {
      // /^(https?:|mailto:|tel:)/.test(path)
      if (Validator.isExternal(url)) {
        return {
          is: "a",
          href: url,
          target: "_blank",
          rel: "noopener"
        };
      }
      return {
        is: "router-link",
        to: url
      };
    }
  }
};
script>

 el-menu-item使用：

  
  <app-link v-if="child.redirect != 'noRedirect' &&  child.meta" :to="resolvePath(child.path)">
    <el-menu-item v-if="child && child.meta" :index="resolvePath(child.path)">
      <i class="el-icon-setting">i>
      <span slot="title">{{child.meta.title }}span>
    el-menu-item>
  app-link>