zoukankan      html  css  js  c++  java
  • vueRouter点击打开新页签

         一、vue 路由使用

      vue是单页面SPA,一般我们使用vue-router 设定路由进行页面跳转的时候,都是直接覆盖当前页面。比如,在a页面中有如下超链接

    <router-link to="/sub-task-info-detail">子任务详情</router-link>

    直接这样设置的话,会在当前页面直接修改url,覆盖原始页面。

    我们大多数情况下也是很希望这样的,但是有时候也希望不覆盖当前页面,直接打开一个新页签,类似于<a href="b.html" traget="_blank">详情</a>

         二、vue项目中实现链接打开新页签

        那么链接打开新页面这种情况下如何实现呢?分为两种情形:

    情形一:纯链接跳转打开新页签

    可能你会直接想因为<router-link>经过解析会以超链接<a>的html方式展示,那么直接在其中按照超链接a的方式直接设定traget不就行了么,也就是下面的代码

    <router-link target="_blank" to="/sub-task-info-detail">子任务详情</router-link>    

    经过试验,这种方式是可以在新页面打开的,但是无法带查询参数,只能是纯链接的方式跳转。所以如果url中带查询参数这种方式是不可以的,不建议这样用。

         那么如何带查询参数的并且需要新打开页面如何实现呢?请继续看下面:

    情形二:带查询参数的页面跳转打开新页签

    可以采用编程式的方式实现,代码如下:

    const {href} = this.$router.resolve({
            name: 'foo',
            query: {
              bar
            }
          })
    window.open(href, '_blank')

    可以使用上面的方式,在query中书写查询对象,然后使用window.open()方法打开即可。

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

  • 相关阅读:
    Python is 和 == 的区别, 编码和解码
    Python数据类型之字典
    Python中的基本数据类型之列表与元组初步了解
    Python中基本数据类型与对字符串处理的方法
    Python中的循环体
    Python的历史与基本知识入门
    web前端面试题库
    canvas绘图实现浏览器等待效果
    HTML5 Web Worker的使用
    思维题-方案数
  • 原文地址:https://www.cnblogs.com/x123811/p/8335802.html
Copyright © 2011-2022 走看看