vue项目中跳转到外部链接方法

最新推荐文章于 2024-04-30 10:01:34 发布
转载 最新推荐文章于 2024-04-30 10:01:34 发布 · 1.4w 阅读 · 7

本文介绍了在Vue项目中如何实现从内部页面跳转到外部链接的方法。通过使用window.location.href替代this.$router.push(), 解决了跳转过程中出现的路径错误问题。

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

 <span @click="See(item.qj_url)">360全景看房</span>

 

上面是触发一个点击事件，其中item.qj_url是传给see的url链接，下面是事件执行的函数

 See (e) {
        window.location.href = e
      }
    }

ok，到此就结束啦

Vue3中对router-links二次封装支持内外链接跳转-案例
JackieDYH的博客
08-16 2381
<router-link>标签是用于在Vue不同页面之间跳转，但它不是跳转到外部链接，相反，我们一般使用<a>标签跳转到外部链接。 扩展<router-link>组件非常简单，只需将它包装到我们自己的定制组件中。Ok，我们需要构建一个AppLink组件来处理链接，无论是外部的还是内部的。 AppLink组件 AppLink组件的 props 要包含router-link的所有props。为什么？因为这样我们组件的“接口”就可以模仿 Router...
[Vue] vue跳转外部链接
博文仅作为本人的学习记录，论点和观点仅代表个人而不代表技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！仅供参考，不可尽信。
09-29 9049
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跳转外部链接
m0_53912016的博客
11-24 1899
支持安卓 ios window.open https://blog.csdn.net/lu6545311/article/details/108407171
Nginx配置springboot+vue项目http跳转https
王者归来
07-04 1674
复制keystore到springboot资源目录，修改application.yml配置。访问localhost:81将跳转到。重启nginx -s reload。
如何在vue项目中嵌入jsp页面的方法(2种)
10-15
在介绍如何在Vue项目中嵌入JSP页面的方法之前，首先要了解Vue.js和JSP各自的基本概念和它们之间的关系。 Vue.js是一个渐进式JavaScript框架，用于构建用户界面。它允许开发者通过组件化的方式开发复杂的单页应用...
Vue——动态路由跳转到外部网站
月来better
05-25 1918
<tbody v-if="ports.length > 0"> <tr v-for="item in ports" :key="item.name"> <td > <router-link :to="`/hosts/${item.host_id}/edit`" > <a class="btn-style">编辑</a> </router-link
vue 进入页面之前跳转到外链地址
我叫陈小皮。
11-26 1005
需要在vue进入某个路由前，做判断跳转到外链地址。
在vue中实现嵌套页面(iframe)
10-15
在Vue.js中实现嵌套页面通常涉及到使用`iframe`元素来加载外部网页或者内部组件。`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档，这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常...
vue跳转到外部连接
qq_42488203的博客
01-20 674
如果一个一个拼的话，很长，很繁琐，怎么才能简化呢？如下是我需要拼接到url后面的参数。
vue跳转外链的方法
donghua201的博客
09-27 2449
【代码】vue跳转外链的方法。
vue跳转到外部链接，vue页面的跳转
youshuang1207的博客
07-13 1万+
Vue项目中跳转外部链接 google 就用a标签跳转 vue 页面跳转的两种方式 1，标签跳转 <router-link to='two.html'><button>点我到第二个页面</button></router-link> 2，点击事件跳转 html : <button @click="hreftwo" class="test-one">点我到第二个页面</button> js : methods:{ //跳转页面
vue 路由跳转到外部链接
weixin_30367945的博客
01-16 5728
尝试了几次发现，不论怎么写外部链接，最后跳转的路径都会加上localhost:3030; 这个应该是和vue的路由有关系，最后解决方法， window.location = 'http://www.baidu.com'; 转载于:https://www.cnblogs.com/alvin553819/p/8297159.html...
vue跳转外部链接的方法
jieyucx的博客
03-22 1万+
vue跳转外部链接的方法
VUE跳转外部链接和网页的方法
热门推荐
m0_71231013的博客
03-02 1万+
但是我们发现这样打开有时会出现一个很大的问题："我们打开的外部链接会自动拼接我们的源地址，导致网址链接不正确，无法正常访问"外部链接 b：打开方式（“_blank”新开一个窗口；“_self”覆盖当前窗口）1、有时我们在轮播图中会遇到点击图片进项跳转到第三方网站。2、或者拿到后端返回的url中要进行跳转。4.下面代码复制就能自己用！
【vue路由跳转外部链接】
07-11 6529
vue-router跳转外部链接
vue2跳转外部链接并携带参数并触发
lingrer的博客
04-30 617
通过 window.location.href 修改url 进行跳转。token存储在sessionstorage。需求：跳转外部链接并携带token。
vue 跳转外部链接
最新发布
03-27
### Vue 中实现跳转外部链接的方法 在 Vue 项目中，如果需要实现跳转到外部链接的功能，可以采用多种方法。以下是几种常见的解决方案： #### 方法一：使用 `@click` 和 `window.open` 通过绑定事件监听器，在点击按钮或其他交互组件时调用 JavaScript 的原生函数 `window.open()` 来完成跳转。此方法支持指定目标链接以及打开方式（如新标签页或当前页面）。这种方法简单易懂且兼容性强。 ```html <template> <button @click="openExternalLink">前往百度</button> </template> <script> export default { methods: { openExternalLink() { const externalUrl = &#39;https://www.baidu.com&#39;; window.open(externalUrl, &#39;_blank&#39;); // _blank 表示在新标签页打开 } } } </script> ``` 上述代码展示了如何利用 `@click` 绑定自定义方法并执行跳转逻辑[^1]。 --- #### 方法二：直接修改 `window.location.href` 另一种常见的方式是直接设置全局对象 `window.location.href` 的值为所需的 URL 地址。这种方式适用于希望在同一浏览器窗口内加载新的页面的情况。然而需要注意的是，某些情况下可能会出现路径拼接错误的问题，因此建议手动处理完整的 URL 构造过程。 ```javascript methods: { redirectToBaidu() { let url = &#39;www.baidu.com&#39;; // 不带协议头的原始地址 let fullPath = `${window.location.protocol}//${url}`; // 自动补全 http/https 协议前缀 window.location.href = fullPath; } } ``` 这里提到的路径拼接问题是由于未提供明确的协议信息所引起[^3]。 --- #### 方法三：基于环境变量动态配置基础路径 对于大型应用而言，可能涉及多个部署阶段（例如开发、测试和生产），此时可以通过引入环境变量机制统一管理不同模式下的默认域名或者其他参数设定。具体做法是在项目的根目录下创建 `.env.*` 文件系列，并分别写入对应的键值对数据结构。 ```bash # .env.development VUE_APP_BASE_URL=https://dev.example.com/ # .env.production VUE_APP_BASE_URL=https://prod.example.com/ ``` 随后读取这些预设好的常量即可构建最终的实际连接字符串[^4]: ```javascript computed: { getFullUrl() { return process.env.VUE_APP_BASE_URL + &#39;/some/path&#39;; } }, methods: { navigateToExternalSite() { window.open(this.getFullUrl(), &#39;_self&#39;); } } ``` 以上片段说明了如何借助计算属性辅助生成绝对形式的目标位置。 --- ### 总结 综上所述，Vue 提供了灵活多样的手段帮助开发者轻松达成跨站点导航的需求。无论是简单的静态 HTML 属性还是复杂的业务场景都可以找到合适的应对策略。不过实际编码过程中仍需注意细节上的差异以免造成不必要的麻烦。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值