×

vue应用:路由跳转打开新窗口和关闭窗口

作者:Terry2023.04.15来源:Web前端之家浏览:2321评论:0
关键词:vue

vue应用:路由跳转打开新窗口和关闭窗口。

需求:从当前页面跳转到其他页面时,打开一个新窗口

比如:点击页面上的用户反馈,打开用户反馈的新页面,要使用编程式导航

编程式导航

使用路由对象的resolve的方法解析路由,可以得到location、router、href等目标路由的信息,只要得到href就可以使用window.open打开新窗口了。

代码如下:

// 路由跳转新界面
    userFeedback() {
      // this.$router.push({ path: '/feedback' });
      用push,也能实现跳转,但是不能打开新页面。
      const { href } = this.$router.resolve({
        path: '/feedback'
      });
      window.open(href, '_blank');
    },

如果是复杂的需要带参数跳转的路由,是以下写法,用query携带参数。

 <template slot-scope="scope">
    <el-button
      size="small"
      @click.stop="watchDetail(scope.row)">详情</el-button>
  </template>
watchDetail(row) {
    const { href } = this.$router.resolve({
      path: `/answerSituation`,
      query: {
        id: row.id,
        paperName: this.paperName,
        name: row.name,
        examScore: row.examScore,
        answersTime: row.answersTime
      }
    });
    window.open(href, '_blank');
  }

window.open( )方法

定义和用法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法

window.open(URL,name,specs,replace)

第一个参数URL 

可选。打开指定的页面的URL。如果没有指定URL,打开一个新的空白窗口

第二个参数name

可选。指定target属性或窗口的名称。支持以下值:

  • _blank - 在新窗口显示目标网页。这是默认

  • _self - 在当前窗口显示目标网页

  • _top - 框架网页中在上部窗口中显示目标网页(不常用)

第三个参数

可选参数,设置窗口参数,各参数用逗号隔开。

关闭窗口 window.close()

用法

window.close();   //关闭本窗口
或者
<窗口对象>.close();   //关闭指定的窗口

例子:关闭新窗口

var mywin=window.open('http://www.xxx.com'); //将新打的窗口对象,存储在变量mywin中
 mywin.close();

vue路由跳转打开新窗口(被浏览器拦截)

今天做了一个功能是点击按钮路由跳转打开新的窗口页面

第一种方法

<router-link target="_blank" :to="{path:'/FundManger/FundProductMoney',
query:{managerId:fundcode}}></router-link>"

第二种方法

<a @click="getGetMyPortfolioById(scope.row) ">查看</a>
 
 getGetMyPortfolioById(vals) { 
    getMyPortfolioById({
 
    }).then(response = >{ 
        const routerdata = this.$router.resolve({ 
                  name: '组合分析以及组合持仓', 
                  params: { managerId: vals.fundCode } 
        }) 
        const newhref = routerdata.href + '?managerId=' + vals.fundCode 
         window.open(newhref, '_blank') 
    })
 }


您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20230415a1.html

网友评论文明上网理性发言 已有0人参与

发表评论: