首页 > 其他分享 >vue打开新窗口的两种方式

vue打开新窗口的两种方式

时间:2023-08-02 13:56:53浏览次数:32  
标签:vue routeData 新窗口 blank download 打开 id

1.使用路由跳转,绑定target="_blank"

    <router-link target="_blank" :to="{path:'/pdf/download',params:{id:'8'}}">
            <el-button type="primary">
                Click to download PDF
            </el-button>
        </router-link>

2.写点击事件

toBlank(){
    const routeData = this.$router.resolve({
           path: '/pdf/download',
           query:{
            id:id
           }
         });
         window.open(routeData.href, '_blank');
    }

标签:vue,routeData,新窗口,blank,download,打开,id
From: https://www.cnblogs.com/zh76412950/p/17600473.html

相关文章

  • vue 获取当月第一天日期和最后一天日期
    //获取当月第一天数据getCurrentMonthFirst(){letdate=newDate()date.setDate(1)letmonth=parseInt(date.getMonth()+1)letday=date.getDate()if(month<10)month='0'+monthif(day<10)da......
  • vite+vue3+ts+elementPlus前端框架搭建 [一]
    记录下搭建vite+vue3+ts+elementPlus项目的过程及遇到的问题。建议使用pnpm安装依赖,npm切换到pnpm链接地址:[https://www.pnpm.cn/installation]() 1.运行环境node-vv18.17.0npm-v9.8.12.使用pnpm创建vite项目及安装依赖npminitvite-apppnpmcreate......
  • 【.NET6 + Vue3 + CentOS7.9 + Docker + Docker-Compose + SSL】个人博客前后端运维部
    个人博客前端:https://lujiesheng.cn个人博客后端:https://api.lujiesheng.cn个人博客运维:https://portainer.lujiesheng.cn1.服务器准备我采用的是腾讯云轻量应用服务器(2C4G8M80G),配置如下图:安装镜像选择CentOS7.664bit:2.服务器防火墙设置添加防火墙出入站规则......
  • vue 防连点
    directives:{preventReClick:{inserted:function(el,binding){el.addEventListener('click',(e)=>{if(!el.disabled){el.style.pointerEvents='none'setTimeout(()=>{......
  • vite 项目webstorm跳转失效 VSCode、vue 无法对 @ 路径 跳转 ,几乎适用于所有webpack、
    在根目录加一个jsconfig.json文件{"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"]},"target":"ES6","allowSyntheticDefaultImports&q......
  • vue 通过css 给html元素增加前缀红色星号
    <el-form-item>前面增加红色星号要为<el-form-item>的label增加红色星号,你可以使用CSS中的伪元素::after或::before来实现。下面是如何在样式中添加红色星号的示例:<el-form-itemclass="red-label"label="物流商信息"></el-form-item><stylescopedlang="scss"......
  • 通过Vue + intro.js 实现页面新手引导流程功能
    最近需要增加一个新手页面引导流程的功能,在网上搜罗之后发现了intro.js这个插件1.安装依赖npminstallintro.js--save2.在main.js中引用插件//首页引导插件importintrofrom'intro.js'//introjs库import'intro.js/introjs.css'//introjs默认css样式//introjs还......
  • vue--day50--todolist案例自定义事件修改footer 和header 修改
    1.MyHeader.vue<template><divclass="todo-header"><!--v-model:="title"是实时绑定的--><inputtype="text"placeholder="请输入你的任务名称,回车键确认"v-model="title"@keyup.enter="add"/>......
  • vuex模块化
    importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);importhomefrom"./home"importsearchfrom"./search"conststore=newVuex.Store({modules:{home,search}});exportdefaultstore......
  • ruby web 实战(9)-vue 3基础(3)
    目录选项式API(OptionsAPI)选项式API(OptionsAPI)用包含多个选项的对象来描述组件的逻辑,例如data、methods和mounted。选项所定义的属性都会暴露在函数内部的this上,它会指向当前的组件实例。<script>exportdefault{//data()返回的属性将会成为响应式的状态......