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

最新推荐文章于 2024-04-11 15:17:03 发布

我在在啦我让让啦

最新推荐文章于 2024-04-11 15:17:03 发布

阅读量973

点赞数 1

本文链接：https://blog.csdn.net/annexiaobin/article/details/122670267

版权

Vue 同时被 3 个专栏收录

56 篇文章 6 订阅

订阅专栏

JavaScript

22 篇文章 1 订阅

订阅专栏

ES6

6 篇文章 0 订阅

订阅专栏

前言：项目要求需要点击表格某列跳转到另一个页面，这个页面是新窗口并且需要携带参数到另一个页面里使用。需要用到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都是写好的方法）