使用el-menu打开新标签页到外部网址

使用element-plus 的菜单组件打开外部网址

1 使用数组动态生成的菜单，外部链接的对象结构如下

  {
   id: 12,
   path: "https://",//要打开的网址
   meta: {
     title: "菜单名称",
     icon: "icon-menu-buy",
     linkIcon:'icon-menu-buy-link'
   },
  }

2 el-menu 添加 router 属性，当是打开外部链接的菜单项时index置空，不然会链接到 localhost:8080/要打开的网址；

• 在 menu-item 内部使用 a 标签打开链接，添加后发现只有 a 标签部分能够点击，其它地方点击无法打开新网址，所以需要让 a 标签占据整个 menu-item

<el-menu
  router
  :default-active="activeMenu"
  :unique-opened="true"
  :collapse="!isShow"
  id="menu-wrap"
  @select="toPage"
>
 <el-menu-item :index="computedIndex(item.path)" :key="item.path">
   <template #title>
     <a class="link" v-if="targeLink(item.path)" :href="item.path" target="_blank">
       <span style="margin-left:48px">{{ item.meta.title }}</span>
     </a>
     <span v-else>{{ item.meta.title }}</span>
     <span  v-if="targeLink(item.path)" class="icon link"  :class="item.meta.linkIcon"></span>
   </template>
 </el-menu-item>
</el-menu>

• 使用的样式

a.link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

3 外部链接不应该被激活

• 为了防止点击链接后被激活，添加 default-active 属性，子路由同样需要使菜单高亮，在子路由 meta 中添加需要激活的路由地址,children路由如下，当meta含有activeMenu时，返回activeMenu； 否则返回 path

children:[
 	{
    path: "detail",
    name: "Detail",
    meta: {
      activeMenu:'/父级路由'
    },
    component: () =>
      import(),
  },
]

4 解决在子级路由点击外部链接时，参数被清空的问题

• 在向子级页面传参时使用的 query 传参，修改为 params 传参即可

//path 修改如下
 path: "detail/:参数1/:参数2..../:参数n",
// 传参方式
this.$router.push({
  name: "Detail",
  params: {
    参数1: 参数1,
    参数2: 参数2,
    ....
    参数n: 参数n,
  },
});

//接收参数
this.$route.params.参数1

• 注：传递的参数不能是空字符串，会被认为没有传递参数，报错。