80.Vue跳转页面在新窗口打开并传参

前言:项目要求需要点击表格某列跳转到另一个页面,这个页面是新窗口并且需要携带参数到另一个页面里使用。需要用到this.$router.resolve()

1.在跳转方法里用this.$router.resolve()跳转并使用cookie保存参数传参

// 因为chain_check页面有两个页签 selectNum 是为了区分跳转到trace查询还是span查询

// 点击跳转到trace查询页面
getToTrace(row){
    const newUrl = this.$router.resolve({name:'chain_check',params:{}})
    setCookie('traceId',row.trace_id,1)
    setCookie('serviceName',row.service_name,1)
    setCookie('nowTimeStart',this.nowtime.start_time,1)
    setCookie('nowTimeEnd',this.nowtime.end_time,1)
    setCookie('timeIndex',this.timeIndex,1)
    setCookie('selectNum','1',1)
    window.open(newUrl.href,'_blank')
}
// 点击跳转到span查询页面
getToSpan(row){
    const newUrl = this.$router.resolve({name:'chain_check',params:{}})
    setCookie('spanName',row.span_name,1)
    setCookie('serviceName',row.service_name,1)
    setCookie('nowTimeStart',this.nowtime.start_time,1)
    setCookie('nowTimeEnd',this.nowtime.end_time,1)
    setCookie('timeIndex',this.timeIndex,1)
    setCookie('selectNum','2',1)
    window.open(newUrl.href,'_blank')
}

2.在chain_check页面首先判断selectNum是1还是2 切换对应的页签

// showTable.vue页面

created(){
    if(getCookie('serviceName')){
        this.newRadio = getCookie('serviceName') // 选中的单选按钮
        this.getChange(getCookie('serviceName')) // getchange() 选中按钮触发方法 
        if(getCookie('selectNum') == '2'){
            this.activeName = 'second'      // 此时页签为span查询
        }
    }
}

getChange(val){
    this.serviceName = val
}

先这样 应该就可以了

(setCookie、getCookie都是写好的方法)

 

<think>好的,用户想知道如何在Vue中实现新窗口打开页面的功能。我之前收集了相关的引用资料,需要整理一下方法。 首先,引用[1]提到可以使用<a>标签,但Vue是单页面应用,通常用<router-link>,不过可能需要调整。引用[4]指出虽然官方说<router-link>不支持target="_blank",但在Vue2中如果设置tag="a"的话是支持的。这样用户可以直接用<router-link>加上target属性,这可能是一个方法。 然后,引用[3]和[5]都提到了编程式导航,使用$router.resolve生成路由信息,再用window.open打开。这种方法适合在方法里触发,比如点击按钮的时候。需要传递参数的话,可以通过query或params,但要注意路由配置是否有name属性。 另外,引用[2]和[5]也提到用原生的window.open,结合$router.resolve获取href。这应该是一个比较直接的办法,不过要确保生成的URL正确,包括参数的处理。 还要注意,使用编程式导航时,如果使用params,可能需要路由里配置name,而query则更灵活,可以直接拼在URL上。同时,动态路由参数可能需要用params,但如果在resolve时没有提供,可能会导致路径错误,所以用query可能更稳妥。 总结下来,主要有三种方法:使用<router-link>的target属性、编程式导航配合window.open、以及直接使用<a>标签手动拼接URL。需要根据用户的具体场景来选择,比如是否需要动态参数,是在模板中还是方法里处理跳转等。 还要检查是否有其他需要注意的点,比如浏览器兼容性,或者权限问题导致window.open被拦截。不过用户的问题主要集中在实现方法上,这些细节可能不需要深入,但可以提一下。 最后,生成相关问题,可能涉及不同方法的区别、参数传递问题、或者在新窗口中如何保持Vue状态,不过根据引用内容,相关问题应该围绕实现方法、参数处理和优化等。</think>在Vue中实现新窗口打开页面主要有三种主流方法,以下是具体实现步骤和代码示例: ### 一、使用`<router-link>`标签(Vue2适用) ```html <router-link target="_blank" :to="{ path: '/detail', query: { id: item.id } }" tag="a" > 新窗口打开 </router-link> ``` * 必须设置`tag="a"`属性才能支持target特性[^4] * 通过`query`传递参数会在URL显示参数(如:`/detail?id=123`) ### 二、编程式导航(推荐方法) ```javascript // 在方法中调用 openNewWindow() { const routeData = this.$router.resolve({ name: 'DetailPage', // 需要路由配置name属性 params: { id: this.itemId }, // 隐式传参 query: { from: 'home' } // 显式传参 }); window.open(routeData.href, '_blank'); } ``` * 需确保路由配置包含对应`name`字段[^3] * `params`传参需预先定义路由格式:`path: '/detail/:id'` * `query`参数会显示在URL地址栏 ### 三、原生`<a>`标签实现 ```html <a :href="`${baseUrl}/detail/${item.id}?from=index`" target="_blank" > 外部链接 </a> ``` * 需要手动拼接带参数的完整URL[^1] * 适用于静态路径或简单参数场景 * 需在data中配置`baseUrl`(建议通过`process.env.BASE_URL`获取) ### 参数传递注意事项 1. **动态路由参数**需预先定义路由格式: ```javascript // router.js { path: '/detail/:id', name: 'DetailPage', component: () => import('./views/Detail.vue') } ``` 2. **query参数**会自动转换为URL参数: $$ \text{最终URL} = \text{基础路径} + \text{路径参数} + ? + \text{query字符串} $$ 3. 使用`params`时需确保路由配置包含对应占位符,否则参数会丢失[^5] ### 最佳实践建议 1. 优先使用编程式导航,便于统一管理路由逻辑 2. 动态路径参数建议使用`params`,筛选条件使用`query` 3. 如果需要在子组件中打开窗口,可通过`this.$router.resolve`获取完整路由信息[^3] 4. 注意浏览器窗拦截机制,建议在用户交互事件中触发`window.open`
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值