vue新窗口打开路由

开发的时候,遇到一个需求

1.新窗口打开路由
2.路由传参

新窗口打开路由的实现

使用resolve

路由传参

使用query

代码如下
let condition = this.condition
let href = this.$router.resolve({
  name: 'detail',
  query: {
    id: condition
  }
})
console.log(href)
window.open(href.href, '_blank')
代码解析
name:'detail'

在路由router文件夹中有定义

export default new Router({
routes: [
  {
    path: '/index',
    name: 'HelloWorld',
    component: index,
    children: [
      {
        path: '/',
        component: monitor
      },
      {
        path: 'detail',
        name: 'detail',
        component: detail
      }
    ]
  }
]
})

再看跳转的时候,使用的是window.open
一开始我直接使用了href,发现跳转过去路由不正确,打印出来看另有玄机
在这里插入图片描述

href是一个对象,里面包含了很多东西,此次没有详细了解,使用了里面的href,于是新窗口打开路由实现了。

### Vue3 中实现点击后在新窗口打开指定路由页面 为了实现在 Vue3 项目中点击按钮后,在新窗口打开指定路由页面的功能,推荐使用 `$router.resolve` 方法。此方法返回一个包含 `href` 属性的对象,该属性包含了完整的 URL 地址,可以直接用于 `window.open()` 函数。 下面是一个具体的例子: ```javascript // 假设这是在一个组件的方法内定义的函数 const openInNewTab = (params) => { // 使用 resolve 解析目标路径并带上查询参数 const routeData = this.$router.resolve({ name: "targetRouteName", query: params, params: { catId: params.catId } }); // 利用解析后的 href 创建一个新的浏览器标签页 window.open(routeData.href, '_blank'); }; ``` 上述代码片段展示了如何创建一个名为 `openInNewTab` 的函数[^1],它接收参数并通过编程方式构建通往另一页面的新链接,最终利用 JavaScript 的内置功能开启新的浏览上下文。 对于模板中的 HTML 部分,则可以通过绑定事件处理器来调用这个逻辑: ```html <button @click="() => openInNewTab({ key: value })">Open New Window</button> ``` 此外,如果希望简化操作而不需要额外编写 JavaScript 代码的话,也可以直接采用 `<router-link>` 组件配合其原生属性完成相同效果: ```html <router-link target="_blank" :to="{ name: 'targetRouteName', query: {key: value}, params: {catId:value}}">前往新页面</router-link> ``` 这种方法不仅简洁明了,而且完全遵循 Vue Router 提供的最佳实践指南[^2]。 #### 注意事项 当处理跨域请求或涉及敏感信息传递时需格外小心;另外需要注意的是,某些现代浏览器可能会阻止自动弹出窗口的行为,除非是在用户的交互动作之后立即触发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值