【vue】点击使用新标签打开页面（跳转）

土生土长的IU

已于 2022-05-11 14:27:54 修改

阅读量1.9k

点赞数 3

分类专栏： vue.js 文章标签： vue vue.js 前端

于 2021-07-07 15:24:56 首次发布

本文链接：https://blog.csdn.net/AIB_Kasic/article/details/118547612

版权

函数封装路由跳转品牌详情 query参数 window.open

关键词由CSDN通过智能技术生成

vue.js 专栏收录该内容

85 篇文章 1 订阅

订阅专栏

这是我封装的函数可以使用也可以改进

  goBrandDetail(id) {
      let routeUrl = this.$router.resolve({
        path: "/brand",
        query: { brand_id: id },
      });
      window.open(routeUrl.href, "_blank");
    },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

土生土长的IU

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue新打开一个页签

jieweiwujie的博客

05-31

1640

新打开一个页签

vue打开新的标签页

weixin_43837680的博客

06-06

5571

vue打开新的标签页

参与评论您还未登录，请先登录后发表或查看评论

vue项目中如何在新页面打开页面

最新发布

motoudi的博客

07-30

293

如果直接使用router,那还是单页面应用，所以这里使用的是原生办法window.open('url', '_blank');需求：我有一个列表页，我想在点击列表的时候，在新页面打开它的详情页（这个详情页还是全屏的没有侧边栏和头部导航）1、在路由中定义（我的需求是要和登录导航平级的，因为我不需要侧边栏和头部导航）2、应用跳转打开新网页。

vue 打开新的标签页

weixin_44866917的博客

09-05

1415

【代码】vue 打开新的标签页。

vue中新打开一个标签页面

weixin_44766633的博客

11-18

3106

普通跳转（跳转的是路由） const {href} = this.$router.resolve({ name: "newDate",//这里是跳转页面的name query:{//要传的参数 floor_id:this.floor_id } }); window.open(href, '_blank');//打开新的窗口跳转新的网页

Vue中Router跳转打开新标签页

qq_54140719的博客

03-10

3676

使用router.resolve打开新标签页

vue router 跳转时打开新页面的示例方法

10-16

通过上述代码，当用户点击这个 <router-link> 时，会使用新标签页打开对应的 '/home' 页面。第二种方法是编程式导航。在一些场景下，我们需要在某个事件（如按钮点击）或函数中触发页面跳转，这时候可以使用 Vue ...

vue-router跳转时打开新页面的两种方法

10-16

总结来说，使用vue-router跳转时打开新页面主要有两种方法。第一种是通过组件的target属性来直接实现，第二种是通过编程式导航结合window.open函数。这两种方法都能够有效地在满足业务需求时打开新窗口，增强了应用...

vue单页面应用打开新窗口显示跳转页面的实例

10-17

首先，了解常规的Vue Router页面跳转方式。在Vue组件内部，我们通常通过调用`this.$router.push`方法来实现页面的切换。例如，如果我们想要跳转到名为'abc'的路由，代码会像这样： ```javascript this.$router.push...

vue 跳转页面打开浏览器新窗口或者打开新标签

Z18834071903的博客

04-25

2297

vue 跳转页面打开浏览器新窗口或者打开新标签

Vue 跳转到新的标签页在新的窗口打开页面可传参

热门推荐

weixin_49098968的博客

08-01

1万+

Vue单页面实现跳转到新的标签页

Vue中在新窗口打开页面及Vue-router的使用

08-27

主要介绍了Vue中在新窗口打开页面及 Vue-router的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

vue中路由在新的标签页打开

weixin_33827731的博客

06-23

3267

let routeData = this.$router.resolve({ name: 'commercialPreview', query: {cylType: this.$route.query.cylType}, params: { id: this.id } }) window.open(routeData.href, '_blank') ...

vue router-link 跳转打开新标签页面

qq_33240556的博客

07-01

876

如果你不介意使用 JavaScript 方法来实现新窗口打开，也可以使用。这样，当用户点击按钮时，就会在新标签页中打开指定的路由页面。组件来打开一个新标签页，需要注意的是，进行页面跳转时，若希望使用。在 Vue 中，使用。

vue-router 在新窗口打开页面

前端知识分享喵

05-04

5074

Vue 属于单页面应用，而单页面应用中“路由”是在客户端执行的。客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。

vue中使用路由，在新的标签页打开页面

weixin_44378370的博客

04-17

649

【代码】vue中使用路由，在新的标签页打开页面。

VueRouter 新标签打开页面

tzzdblog的博客

01-03

710

VueRouter 新标签打开页面今天在做点击新标签打开页面的时候，因为业务需求的原因，这儿的触发区域使用 a 标签不合适，因此采用了下面的方式进行解决。 const routerJump = this.$router.resolve({ path: `/courses/${this.course.id}/`, query: { from_home: true, }, }) window.open(routerJump.h

vue项目点击左侧子菜单，打开一个新的浏览器标签页

二三的博客

11-27

6842

在项目开发中，产品给了这样一个需求：点击左侧子菜单，在浏览器中打开一个新的标签页，展示数据大屏。在此写个随笔记录下实现过程。思路：使用编程式导航实现页面跳转，我们常用的是 $router.push 和 $router.go，但是Vue2.0以后，这种方式不支持新窗口的打开属性了，所以这个时候可以使用this.router.go，但是Vue2.0以后，这种方式不支持新窗口的打开属性了，所以这个时候可以使用this.router.go，但是Vue2.0以后，这种方式不支持新窗口的打开属性了，所以这..

vue 跳转打开新页面

一路向前的博客

08-13

3515

1.官方文档中说 v-link 指令被组件指令替代，且不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用标签，但事实上vue2版本的是支持 target="_blank" 属性的(tag=“a”)，如下： <router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link> 2.有些时候需要在单击事件或者在函数中实现页面跳转，那么可以

vue点击事件实现新标签页跳转网站

04-25

可以使用以下代码实现： ``` 点击跳转到Example网站 ...在模板中，使用`<a>`标签设置跳转的网址，并且...为了阻止默认的页面跳转行为，`@click.prevent`指令可以阻止事件冒泡，从而实现在新标签页中跳转网站。

【vue】点击使用新标签打开页面（跳转）

这是我封装的函数 可以使用 也可以改进

这是我封装的函数可以使用也可以改进