vue如何实现路由跳转到外部链接界面
vue路由跳转到外部链接界面
项目中用前端的是vue框架，有一个需求是，当点击一个按钮后，跳转到原来已经发布过的ionic界面上。
如果是vue页面中的内部跳转，可以用this.$router.push()实现，但是如果我们还用这种方法跳到外部链接，就会报错，因为外部页面中是有HTTP等前缀的，那么我们如何跳转到外部链接呢，我们只需用 window.location.href = ‘url’来实现
具体代码如下：
//在data中定义好需要用到的路由数据 url:"http://www.baidu.com"
触发一个点击事件，其中item.url是传给执行方法的url链接，下面是事件执行的函数。
<span @click="See(item.url)">
方法执行：
See (e) {
window.location.href = e
}
}vue路由跳转说明
vue中路由跳转有很多使用 router-link to的，这是最常用的方法（单页面跳转），例子：
（to指向的就是路由路径）
<el-menu class="theselect" :default-active="activeIndex" mode="horizontal" @select="handleSelect">
<el-menu-item index="1"><router-link to="/">首页</router-link></el-menu-item>
<el-menu-item index="2"><router-link to="/news" tag="span">最新资讯</router-link></el-menu-item>
<el-menu-item index="3"><router-link to="/3" tag="span">个性阅读</router-link></el-menu-item>
<el-menu-item index="4"><router-link to="/4" tag="span">智慧生活</router-link></el-menu-item>
<el-menu-item index="5"><router-link to="/5" tag="span">校内互动</router-link></el-menu-item>
</el-menu>像element的官网中举的例子，也有用href跳转到的（跳转到外部链接）
实际上他们算是同一个东西，router-link to本质上也是一个a标签。
但这么使用会出现一个问题：
因为这个链接只包含了文字，所以此时只有点击上文字才可以跳转，但是事实上element的这个导航模块，包括他的active样式，都应该是只要点击这个区域就可以选中跳转，而不是必须点到文字上。
这时候就出现了一个很细微的操作差，如果是直接跳转到其他界面的多界面显示也还好，反正也看不出来，但是vue有很多都是单界面显示，并且出于vue组件的复用性，有很大可能性是一个顶部导航栏会复用在好几个主界面。
需求解决的问题：
跳转区域不应该只包含文字，而应该是这个小选项一整块。
但是这时候不能简单的把router link to拿出去把这一块包含，
像这样：（错误示范）
<el-menu class="theselect" :default-active="activeIndex" mode="horizontal" @select="handleSelect">
<router-link to="/"><el-menu-item index="1">首页</el-menu-item></router-link>
</el-menu>因为router link to它是一个a标签啊，拿去包一个li小模块（也可以理解为div，反正就是这一小块）就不适合了，它可能会影响部分布局样式，怪麻烦的。
正确解决方法：
<el-menu class="theselect" :default-active="activeIndex" router mode="horizontal" @select="handleSelect">
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/news">最新资讯</el-menu-item>
<el-menu-item index="/3">个性阅读</el-menu-item>
<el-menu-item index="/4">智慧生活</el-menu-item>
<el-menu-item index="/5">校内互动</el-menu-item>
</el-menu>加了一个router。
这时候index=’/'指向的就是路由路径，点击这个模块就可以直接跳转
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章将详解介绍Vue3中如下七种组件通信方式：props、emit、v-model、refs、provide/inject、eventBus、vuex/pinia(状态管理工具)。感兴趣的可以了解一下2022-02-02
分析 Vue 中的 computed 和 watch 的区别
这篇文章分析 Vue 的 computed 和 watch 的区别，computed 用来监控自己定义的变量，页面上可直接使用。watch 是监测 Vue 实例上的数据变动，通俗地讲，就是检测 data 内声明的数据,需要的朋友可以参考一下2021-09-09
这篇文章主要介绍了Vue如何实现table表格置顶，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue实现图片按比例缩放问题操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Vite Vue3 EsLint Prettier配置步骤极简方法详解
这篇文章主要为大家介绍了Vite Vue3 EsLint Prettier配置步骤的极简方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要给大家介绍了关于Vue组件传值过程中丢失数据的分析与解决方案，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
Vue是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的，目前是全球“最”流行的前端框架。使用vue开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！下面来看看其得安装及使用方法吧2021-10-10
这篇文章主要介绍了vue-cli设置publicPath小记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
本篇文章主要介绍了Vue常用指令_V-model用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
Vue + Element 实现按钮指定间隔时间点击思路详解
这篇文章主要介绍了Vue + Element 实现按钮指定间隔时间点击,实现思路大概是通过加一个本地缓存的时间戳，通过时间戳计算指定时间内不能点击按钮，具体实现代码跟随小编一起看看吧2023-12-12
最新评论