vue+el-menu设置了router之后如何跳转到外部链接

2023-02-18,,,,

<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"

text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
   <template>

    <el-menu-item index="https://www.baidu.com/" :key="https://www.baidu.com/">
      <span slot="title">百度</span>
    </el-menu-item>
  </template>
</el-menu>
 
情况分析:
  当使用 vue-router 的模式即在<el-menu>中添加了router之后,启用该模式会在激活导航时以 index 作为 path 进行路由跳转,但是跳转的都是自己规定好了的路由,当在index中填写外部路由,如index='https://www.baidu.com/',则跳转时会出现跳转出来的界面是空白,仔细查看地址栏,发现目标链接前面加了一点东西,http://localhost:8080/https:/www.baidu.com/,正式由于多加了红色部分,是的我们的路由跳转失败,解决办法如下:

<el-menu-item index="" key="http://study.hub.nercel.com/">
  <a href='http://study.hub.nercel.com/' target='_self'>华师学习大数据</a>
</el-menu-item>
 
这里 index="" 设置为空,这里也可以将index删除掉,但是会报index找不到的错,所以还是设置为空的好,同时<span slot="title">百度</span>改为<a href='http://study.hub.nercel.com/' target='_self'>华师学习大数据</a>,即改为<a>标签链接,这样就可以实现a链接跳转到尾部链接的目的了,这里顺带提一下:实现相同窗口打开外部链接,可以将a标签里的target改为_self,要实现新的窗口打开外部链接只需要将target设置为_blank即可,

vue+el-menu设置了router之后如何跳转到外部链接的相关教程结束。

《vue+el-menu设置了router之后如何跳转到外部链接.doc》

下载本文的Word格式文档,以方便收藏与打印。