<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. 用openssl为EAP-TLS生成证书(CA证书,服务器证书,用户证书)

    用openssl为EAP-TLS生成证书(CA证书,服务器证书,用户证书) 来源: https://www.cnblogs.com/osnosn/p/10597897.html 来自osnosn的博客 ...

  2. Ubuntu16.04安装Python3.6 和pip(python3 各版本切换)

    安装: sudo add-apt-repository ppa:jonathonf/python-3.6 sudo apt-get update sudo apt-get install python ...

  3. struct2depth 记录

    把效果图放在前面 03.28 handle_motion  False architecture    simple joint_encoder  False depth_normalization  ...

  4. Java核心-多线程-并发控制器-Semaphore信号量

    Semaphore是非常有用的一个多线程并发控制组件(Java还有CountDownLatch.CyclicBarrier.Exchanger多线程组件),它相当于是一个并发控制器,是用于管理信号量的 ...

  5. 2018/12/19 20:55:58 螺纹钢豆粕PTA

    螺纹钢M5中枢上升到M30级别,感觉向上的可能高..可是没有好的开仓位,那就不用硬要开仓,耐心等待自己熟悉的信号: PTA M5中枢扩展为M30中枢,目前M30向下一笔没结束: 豆粕等待当前日线下跌结 ...

  6. Validation.Add();Excel

    Irange = (Microsoft.Office.Interop.Excel.Range)worksheet.get_Range("I1", "I1").g ...

  7. Android 开发 ConstraintLayout详解

    implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha3' app:layout_constraintHorizo ...

  8. django用户权限操作

    第一步:创建数据库和超级管理员,为了比较方便使用(里面有些的是没用的),额外新增 chioces , per_method , argument_list # 用户权限# 建立一个权限表,将映射关系存 ...

  9. 浅谈C#堆栈与托管堆的工作方式(转)

    C#初学者经常被问的几道辨析题,值类型与引用类型,装箱与拆箱,堆栈,这几个概念组合之间区别,看完此篇应该可以解惑. 俗话说,用思想编程的是文艺程序猿,用经验编程的是普通程序猿,用复制粘贴编程的是2B程 ...

  10. gitlab安装部署汉化

    1.获取gitlab汉化包(要部署非汉化版,可以跳过这一块内容) 说明:gitlab中文社区版的项目,v7-v8.8是由Larry Li发起的“GitLab 中文社区版项目”(https://gitl ...