vue-router如何在新窗口打开页面

前端 潘老师 3个月前 (11-22) 105 ℃ (0) 扫码查看

本文主要讲解关于vue-router如何在新窗口打开页面相关内容,主要优两个方法,让我们来一起学习下吧!

方法一:使用标签

需要注意的是,router-link并不支持 target=”_blank”属性,所以需要tag=“button”属性把router-link渲染成标签。

<router-link tag="button" target="_blank" :to="{name:'List',query:{id: 'val'}}">详情页</router-link>

方法二:通过router.resolve()实现

有些时候需要在点击事件或者函数中实现页面跳转到新的界面,这时候就可以通过router.resolve()来实现。

 //定义一个路径
      const href = this.$router.resolve({
        path: `/visualizationShow`,
        query: { key: 需要传递的值 },
      }).href;
      //打开新的页面 到 href 这个页面
      window.open(href, "_blank");
      
      
     // 新窗口接收参数的方法: 
  watch: {
    "$route.query.key": {
      deep: true,
      handler(val) {
           console.log(val) // 获取url上传递的参数
      },
    },
  },

以上就是关于vue-router如何在新窗口打开页面相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/11731.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】