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

目录
  • vue路由跳转到外部链接界面
  • 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=’/'指向的就是路由路径，点击这个模块就可以直接跳转

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue3.0路由跳转携带参数的示例详解

    目录 一.路由跳转 1.在需要跳转的页面 2.如果有参数的话,在接收页面引入API–useRoute 二.页面传参需要注意的问题 一.路由跳转 1.在需要跳转的页面 //引入API---useRouter import { useRouter } from 'vue-router' ...... //定义router变量 const router =useRouter() const methodClick=(data)=>{ let paramValue=data.deviceCode //路

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 手把手教你Vue3实现路由跳转

    手把手教你Vue3实现路由跳转

    目录 一.安装 vue-router 二.新建 vue 页面 2.1 login.vue 2.2 register.vue 三.新建路由文件 3.1 新建 index.js 3.2 新建 routes.js 四.在 App.vue 中配置路由的跳转 五.在 main.js 中 use 路由 六.src 目录结构 七.结果 7.1 默认页面 7.2 点击登录 7.3 点击注册 总结 一.安装 vue-router npm install vue-router@4 二.新建 vue 页面 在 src

  • Vue路由跳转与接收参数的实现方式

    一.路由跳转四种方式 (带参数) router-link传递 <router-link :to="{ path: '/传递的页面名', query: {id: item.id }, }"></router-link>接收 页面 2) this.$router.push() (函数里面调用) es6模板字符串模板字符串中嵌入变量,要将变量名写在${}之中模板字符串使用反单引号(backquote) `` // 写法一 var str = 'return ' + '

  • Vue实现路由跳转至外界页面

    目录 Vue路由跳转至外界页面 解决办法 Vue路由跳转页面的几种方式 总结 Vue路由跳转至外界页面 用法 如果使用路由是在 vue 页面中来回跳转,可以使用 this.$router.push() 实现,但是如果想用这种方法跳转到外部链接就会报错,因为外部页面中是存在 HTTP 等前缀的. 解决办法 1. 在 data 中定义好要跳转的外部链接 data() {     return {         url: 'http://www.baidu.com'     } } 2. 按钮中创建

  • 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部. 最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了.最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳

  • vue项目中跳转到外部链接的实例讲解

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题,那么我们如何跳转到外部链接呢,我们只需用 window.location.href = 'url'来实现,具体代码如下: <span @click="See(item.qj_url)">360全景看房</s

  • vue项目中路由跳转页面不变问题及解决

    目录 vue中路由跳转页面不变 问题 解决方法 路由跳转页面不刷新.this.$router.go(-1)不生效 解决思路 vue中路由跳转页面不变 问题 今天在开发vue移动端项目的过程中发现了一个bug,就是当按返回键的时候页面并没有发生变化,一开始还以为是没有监听到返回事件,但是通过测试之后发现返回事件监听成功了,路由也发生了变化,相应事件也触发了,就是页面视图没有跟着改变. 解决方法 项目中路由设置的是 hash模式,所以对 hashchange 事件进行监听(hash模式下,路由的变化

  • vue实现路由跳转动态title标题信息

    目录 路由跳转动态title标题信息 vue动态改变title 需求 解决需求一 解决需求二 路由跳转动态title标题信息 想要让浏览器的标题,随着vue的路由跳转的改变而改变,就要配置router/index.js文件里的信息.在meta对象里面配置一个title. {     path: "/",     name: "Home",     meta: {       title: "首页"//这是重点     },     compone

  • 微信小程序跳转外部链接的详细实现方法

    微信小程序跳转外部链接的详细实现方法

    目录 微信小程序跳转外部链接 1.配置业务域名 2.不勾选 “不校验合法域名” 3.刷新项目配置 4.打开外部链接 总结 微信小程序跳转外部链接 在开发小程序过程中,我们可能会有这样的需求,在小程序中打开H5或者外部链接 实现方法如下: 1.配置业务域名 小程序管理后台——开发(开发管理)——开发设置:新增业务域名 在这里将你需要的外部链接域名配置完之后,再下载校验文件(校验文件需要放到当前域名的根目录下) 2.不勾选 “不校验合法域名” 开发者工具进行 “不校验合法域名”配置 3.刷新项目配置

  • vue路由跳转时判断用户是否登录功能的实现

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

  • Vue路由跳转问题记录详解

    Vue路由跳转问题记录详解

    最近项目上需要用Vue用来做app,在Vue中使用路由时遇到下面的问题. 路由设置如下: { path:'/tab', component:Tab, children:[{ path:'layoutList', name:'LayoutList', component:LayoutList },{ path:'layoutView/:layoutId', name:'LayoutView', component:LayoutView },{ path:'layoutDetail/:viewId'

  • vue.js路由跳转详解

    本文为大家分享了vue.js路由的跳转,供大家参考,具体内容如下 1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <rout

  • vue 实现在函数中触发路由跳转的示例

    如下所示: <span @click="clickFn">点我</span> methods:{ clickFn:function(){ this.$router.go('/login');//其中login是你定义的一个路由模块 } 以上这篇vue 实现在函数中触发路由跳转的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐