<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之后如何跳转到外部链接的更多相关文章

  1. vue项目中跳转到外部链接方法

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了htt ...

  2. vue项目跳转到外部链接

    vue项目中遇到一个打印的功能.思考之后决定点击按钮,跳转到一个HTML页面(后台写的),利用window.print()方法调用浏览器的打印的功能. 所以,现在的问题是,怎样跳转到外部链接.开发vu ...

  3. vue 路由跳转到外部链接

    尝试了几次发现,不论怎么写外部链接,最后跳转的路径都会加上localhost:3030; 这个应该是和vue的路由有关系,最后解决方法, window.location = 'http://www.b ...

  4. vue跳转到外部链接

    <span @click="see('http://xxxx">点击跳转到xxx</span> 方法:(调用函数) See (e) { window.loc ...

  5. vue Element动态设置el-menu导航当前选中项

    1,npm install vuex --save 2,在src下新建vuex文件夹,新建store.js文件: store.js import Vue from 'vue' import Vuex ...

  6. vue router的浏览器跳转行为

    最近做的项目中,涉及vue router 路由操作,其操作方法不同,产生的行为亦不同.本文通过对比实验,对其行为进行实验对比及总结,避免混淆. vue router的单页跳转的history模式,类似 ...

  7. vue的路由设置小结

    vue的路由设置小结 // 异步路由的编写示例.其中针对component字段进行懒加载及分块处理,提升首屏加载速度的同时,也可以手动控制让某些页面合并到一个单独的js文件中,而不是每个页面都是一个j ...

  8. vue中select设置默认选中

    vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...

  9. vue子路由设置、全局组件、局部组件的原生写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. JSON和JSONP,浅析JSONP解决AJAX跨域问题

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

  2. xyplorer设置备忘

    xyplorer设置备忘https://www.cnblogs.com/liuzhaoyzz/p/9911665.html1.双击向上一级工具→配置→菜单,鼠标,安全性→鼠标→双击空白空间时向上一级. ...

  3. apache2.4+php7.3.2+mysql5.7

    一.下载php7和apache2.4 1 首先下载php7的windows压缩包,到这里下载http://windows.php.net/download/ 我选择的是php7的这个版本,由于它是vc ...

  4. php变量函数

    这个东西相当于C语言中的函数指针,C#里的委托   function come() {                   //定义com函数 echo "来了<p>" ...

  5. 搭建真正的zookeeper集群

    搭建zookeeper伪分布式集群 zookeeper是Hadop Ecosystem中非常重要的组件,它的主要功能是为分布式系统提供一致性协调服务, 提供的功能包括配置维护,域名服务,分布式同步和组 ...

  6. windows server 2003产生的 Minidmp蓝屏文件分析求助

    在机房运行的四台服务器中均出现了蓝屏dmp文件,经过整理发现CDMS主备服务器最近(2018年1月开始)蓝屏的dmp很多.经过自己的学习分析发现不足以找到先关的原因和处理方法,希望得到大牛们的帮助.以 ...

  7. bzoj4025二分图(线段树分治 并查集)

    /* 思维难度几乎没有, 就是线段树分治check二分图 判断是否为二分图可以通过维护lct看看是否链接出奇环 然后发现不用lct, 并查集维护奇偶性即可 但是复杂度明明一样哈 */ #include ...

  8. 基于wepy和云开发的动漫资讯小程序----233次元

    233次元小程序 # 233次元小程序 项目描述- 基于微信小程序的动漫咨询小程序,采用`wepy`框架开发:- 后台数据采用小程序的云开发存储: 线上体验 部分截图                 ...

  9. Ping--域名替换重要角色

    Ping-问答解惑 一.ping的概念?目的? 答: (1)ping是:在探测主机与主机之间是否可以通信,建立连接:若是源主机在一定时间内收到应答,则证明主机可达,用户不受影响. (2)ping的最终 ...

  10. electron builder 打包错误 cannot unpack electron zip file 解决方案

    npm run buildwin > study01@1.0.0 buildwin F:\Nodejs\electron\Test\study01> electron-builder -- ...