vue如何实现路由跳转到外部链接界面

 更新时间:2022年10月12日 10:45:14   作者:molihuakai_118  
这篇文章主要介绍了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=’/'指向的就是路由路径,点击这个模块就可以直接跳转

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue实现点击按钮复制文本内容的例子

    Vue实现点击按钮复制文本内容的例子

    今天小编就为大家分享一篇Vue实现点击按钮复制文本内容的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue3源码剖析之简单实现方法

    vue3源码剖析之简单实现方法

    源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue中如何对ElementUI的Dialog组件封装

    Vue中如何对ElementUI的Dialog组件封装

    这篇文章主要介绍了Vue中如何对ElementUI的Dialog组件封装问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue SPA 初次进入加载动画实现代码

    Vue SPA 初次进入加载动画实现代码

    今天小编就为大家分享一篇Vue SPA 初次进入加载动画实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue2.0使用md-edit编辑器的过程

    vue2.0使用md-edit编辑器的过程

    这篇文章主要介绍了vue2.0+使用md-edit编辑器的解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-02-02
  • 浅谈vuex的基本用法和mapaction传值问题

    浅谈vuex的基本用法和mapaction传值问题

    今天小编就为大家分享一篇浅谈vuex的基本用法和mapaction传值问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue之过滤器详解

    Vue之过滤器详解

    这篇文章主要为大家介绍了Vue之过滤器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助,希望能够给你带来帮助
    2021-11-11
  • Vuex(多组件数据共享的Vue插件)搭建与使用

    Vuex(多组件数据共享的Vue插件)搭建与使用

    Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享,数据缓存等等,下面这篇文章主要给大家介绍了关于Vuex(多组件数据共享的Vue插件)搭建与使用的相关资料,需要的朋友可以参考下
    2022-10-10
  • Vue3项目中的hooks的使用教程

    Vue3项目中的hooks的使用教程

    今天我们稍微说一下 vue3 项目中的 hooks 的使用,其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的,学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉,快跟随小编一起来学习学习吧
    2022-08-08
  • Vue混入与插件的使用介绍

    Vue混入与插件的使用介绍

    这篇文章主要介绍了Vue混入与插件的使用,mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如data、components、methods 、created、computed等等
    2022-09-09

最新评论