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

àì夳堔傛蜴生んèń 2021-11-11 18:18 1339阅读 0赞

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

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

<el-menu-item index="[https://www.baidu.com/][https_www.baidu.com]" :key="[https://www.baidu.com/][https_www.baidu.com]">

</el-menu-item>

</template>

</el-menu>

情况分析：

当使用 vue-router 的模式**（**即在<el-menu>中添加了router之后**）**，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，但是跳转的都是自己规定好了的路由，当在index中填写外部路由，如index='[https://www.baidu.com/][https_www.baidu.com]',则跳转时会出现跳转出来的界面是空白，仔细查看地址栏，发现目标链接前面加了一点东西，[http://localhost:8080/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即可，

转载于:https://www.cnblogs.com/MrZWJ/p/10766462.html

[https_www.baidu.com]: https://www.baidu.com/
[http_localhost_8080_https_www.baidu.com]: http://localhost:8080/https:/www.baidu.com/