Vue项目点击跳转外部链接

最新推荐文章于 2024-11-10 21:51:58 发布
最新推荐文章于 2024-11-10 21:51:58 发布
阅读量4.1k 收藏 17
点赞数 5
CC 4.0 BY-SA版权
分类专栏： js模块 web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41791345/article/details/119676487
本文介绍了在Vue项目中实现页面跳转的两种方法：一种是使用`window.location.href`覆盖当前页面，另一种是利用`window.open`在新窗口打开链接，保持当前页面不被覆盖。详细解析了`_self`和`_blank`参数在跳转过程中的作用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述：

在Vue项目页面中，点击某个按钮，跳转到项目外其他链接页面

1、页面点击覆盖当前页面

window.location.href = 'https://www.baidu.com'

2、点击重新打开一个页面窗口，不覆盖当前的页面

 window.open('https://www.baidu.com',"_blank")
 "_blank"  新打开一个窗口
 "_self"    覆盖当前的窗口
vue4 跳转外部链接_vue项目跳转到外部链接
weixin_39969881的博客
12-20 4043
vue项目中遇到一个打印的功能。思考之后决定点击按钮，跳转到一个HTML页面(后台写的)，利用window.print()方法调用浏览器的打印的功能。所以，现在的问题是，怎样跳转到外部链接。开发vue项目的人都知道，vue项目会分为三个版本：开发，测试，生产，我们可以在config文件夹下面的dev.env.js，prod.env.js，test.env.js配置路径。所以我们就会遇到跨域的问题。...
Vue项目中在单个组件内实现外部链接跳转实例
最新发布
07-18
在 Vue 页面中，内部跳转可以通过 this.$router.push() 方法实现，但如果直接使用该方法跳转到外部链接，就会报错。这是因为外部链接会被错误地加上本地开发服务器的地址（如 http://localhost:8080/#/），从而导致...
vue项目中跳转到外部链接的实例讲解
12-29
当我们在文件中，如果是vue页面中的内部跳转，可以用this.$router.push()实现，但是如果我们还用这种方法跳到外部链接，就会报错，我们一看链接的路径，原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题，那么我们如何跳转到外部链接呢，我们只需用 [removed].href = ‘url’来实现，具体代码如下： <span click=See(item.qj_url)>360全景看房</span> 上面是触发一个点击事件，其中item.qj_url是传给see的url链接，下面是事件执行的函数 See (e
Vue列表点击跳转外部链接
米拉
03-17 1126
页面效果是酱紫的： 给了一套酱紫的数据，需要点击观看回放的时候跳转到不同的连接地址（reback字段） [ { "id": 1, "name": "只楚街道", "reback":"https://xxxxx.com/live/tvchat-1430991900?v=1615941114578#/", "state": 2, "time":"17:00" },{ "id": 2,
vue跳转外部链接
m0_53912016的博客
11-24 1881
支持安卓 ios window.open https://blog.csdn.net/lu6545311/article/details/108407171
[Vue] vue跳转外部链接
大家好，我是+V
09-29 9020
vue跳转外部链接 vue 跳转外部链接问题,当跳转的时候会添加在当前地址后面。 var url = 'www.baidu.com' //跳转1 window.localtion.href = url //跳转2 window.history.pushState(url); window.history.replaceState(url); //跳转3 window.open(url,"_blank"); //跳转4 var a = document.createElement("a"); a.se
vue项目中跳转到外部链接，不使用a标签
cuicuibao的博客
03-07 716
点击去往百度官网
vue点击按钮跳转外部链接
06-09
要在Vue中通过点击按钮跳转到外部链接，你可以使用`<a>`标签的`href`属性，或者使用`window.location`对象的`href`属性。以下是两种不同的方法： 1. 使用`<a>`标签 ```html 跳转到外部链接 ``` 在上面的...
vue-router跳转时打开新页面的两种方法
12-08
记录一下在vue项目中如何实现跳转到一个新页面（一个比较简单又比较基础的问题了），有两个方法： 1、<vue>标签实现新窗口打开 官方文档中说 v-link 指令被 <router> 组件指令替代，且 <router> 不支持 target=”_...
vue跳转方式
Skty_ywh的博客
03-21 3910
vue跳转方式
vue跳转外部链接的方法
热门推荐
jieyucx的博客
03-22 1万+
vue跳转外部链接的方法
vue 实现点击跳转页面
qq_33240556的博客
07-11 3763
在Vue中实现点击跳转页面，通常有两种常见的方式：使用组件和编程式导航。下面分别介绍这两种方法。
vue项目中显示第三方外部链接的页面
韩旭不会敲代码吧的博客
04-25 6348
vue项目中显示第三方外部链接的页面
【Vue】跳转外部链接并携带参数并触发
zero_or_hero_的博客
10-13 8614
需求： 当平台运行多个系统时（"系统一"，"系统二" 都是不同时间段开发的） 可以从"系统一"点击按钮跳转到"系统二"，并且完成 "系统二"登录操作，直接显示"系统二"的主页，可以视为两套系统使用相同的用户名密码
vue实现点击元素跳转至另一个网站
HWL5679的博客
06-19 1672
window.location.href = 'https://www.example.com'; 打开新标签页或新窗口： window.open('https://www.example.com', '_blank');
vue点击按钮跳转页面
qq_24441205的博客
02-22 1万+
1.给按钮添加点击事件 <button @click="register">登录</button> 2.实现跳转 在methods里面写入一下代码 register () { //跳转到上一次浏览的页面 this.$router.go(-1) //指定跳转的地址 this.$router.replace('/将要跳转的路由名称') //指定跳转的路由的名字下 this.$router.replace({n
vue.js中点击按钮跳转到链接地址并打开新页面（不传递参数）
六六的小帅的博客
08-05 1万+
在本页面打开链接 <template> <div> <el-button @click="handle(scope.row.url)">打印</el-button> </div> </template> <script> handle(url) { window.location.href = 'url' } </script> 在新页面.
vue链接跳转
ctips的博客
11-10 1420
ref新标签页打开：使用。当前页面打开：使用。直接使用标签：简单场景中最直接的方式。选择其中一种方式，根据需求在组合式 API 中实现外链跳转。
vue 实现跳转第三方平台
qq_33240556的博客
07-01 1815
在Vue中实现跳转到第三方平台，通常可以通过几种方式来完成，具体取决于你是想在当前浏览器窗口打开链接，还是新开一个窗口，或者使用iframe嵌入等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值