vue的跳转(打开新页面)

2023-10-27

1、router-link跳转

   // 直接写上跳转的地址
  <router-link to="/detail/one">
    <span class="spanfour" >link跳转</span>
  </router-link>
  // 添加参数
  <router-link :to="{path:'/detail/two', query:{id:1,name:'vue'}}">
   </router-link>
  // 参数获取
  id = this.$route.query.id
  // 新窗口打开
  <router-link :to="{path:'/detail/three', query:{id:1,name:'vue'}}" target="_blank">
  </router-link>

2.this.$router.push/replace跳转

toDeail (e) {
   this.$router.push({path: "/detail", query: {id: e}})
 }
 // 参数获取
 id = this.$route.query.id
 
 toDeail (e) {
   this.$router.push({name: "/detail", params: {id: e}})
 }
 // 注意地址需写在 name后面
 //参数获取,params和query区别,query参数在地址栏显示,params的参数不在地址栏显示
 id = this.$route.params.id

3、resolve跳转

	//resolve页面跳转可用新页面打开
    //2.1.0版本后,使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了
 toDeail (e) {
   const new = this.$router.resolve({name: '/detail', params: {id: e}})
   window.open(new.href,'_blank')
 }

4、window.open()

1. 在当前窗口打开百度,并且使URL地址出现在搜索栏中.

window.open("http://www.baidu.com/", "_search");

window.open("http://www.baidu.com/", "_self");

 

2. 在一个新的窗口打开百度

window.open("http://www.baidu.com/", "_blank");

 

3. 打开一个新的窗口,并命名为"hello"

window.open("", "hello");

 

另外, open函数的第二个参数还有几种选择:

_top : 如果页面上有framesets,则url会取代framesets的最顶层,, 如果没有framesets, 则效果等同于_self.

_parent: url所指向的页面加载到当前frame的父亲, 如果没有则效果等同于_self.

_media : url所指向的页面加载到Media Bar所包含的HTML代码区域中.如果没有Media Bar则加到本身.

 

如果还要添加其它的东西在新的窗口上, 则需要第三个参数:

channelmode : yes|no|1|0  (窗口显示为剧场模式[全屏幕显示当前网页, 包括工具栏等],或频道模式[一般显示]).

directories :  yes|no|1|0 (是否添加目录按钮, 比如在IE下可能会有一个"链接"这样的按钮在最上面出现)

fullscreen : yes|no|1|0 (使浏览器处理全屏幕模式, 并隐藏标题栏和菜单等)

menubar : yes|no|1|0 (是否显示浏览器默认的菜单栏)

resizeable : yes|no|1|0 (窗口是否可调整大小)

scrollbars : yes|no|1|0 (是否允许水平或垂直滑动条)

titlebar : yes|no|1|0 (是否添加一个标题栏)

toolbar : yes|no|1|0 (是否添加浏览器默认的工具栏)

status : yes|no|1|0 (是否显示状态栏)

location : yes|no|1|0  (是否显示搜索栏)

copyhistory :  yes|no|1|0 (似乎已经废弃, 如果只要工具栏显示, 历史按钮就会显示出来)

height : 窗口的高度, 最小值为100像素

width :  窗口的宽度, 最小值为w100像素

left : 窗口的最左边相对于屏幕的距离
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue的跳转(打开新页面) 的相关文章

  • Chart.js 在初始化时设置活动段

    我正在使用 Chart js v2 并且尝试在加载图表时模拟圆环图上某个段的 悬停状态 因此看起来有一个部分已突出显示 我已经搜索和梳理了代码一天 但找不到一个好的方法来做到这一点 提前致谢 设置片段的悬停样式有点令人困惑 因为它没有真正记
  • 如何使用javascript将大图像转换为十六进制?

    如果我尝试将图像转换为十六进制 无论我使用哪个函数 我都会收到此错误消息 该图像的大小为 7 MB 19812 毫秒 清理 1401 2 1455 0 gt 1401 2 1455 0 MB 9 9 0 ms 自上次 GC 以来 8 3 m
  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的
  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端?

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在
  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 为什么我们在打字稿中使用 HTMLInputElement ?

    我们为什么使用 document getElementById ipv as HTMLInputElement value 代替 document getElementById ipv value 功能getElementById返回具有类
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro

随机推荐

  • django系列 第一节

    一 安装python 安装django 使用虚拟环境 Virtualenv python3的安装方法 http blog csdn net xudailong blog article details 78309857 django的安装方
  • LeetCode(力扣) 312题:戳气球----动态规划求解附带详细注释

    问题描述 有n个气球 编号为 0 到 n 1 每个气球上都标有一个数字 这些数字存在于数组nums中 现在要求你戳破所有的气球 戳破第 i 个气球 你可以获得nums i 1 nums i nums i 1 枚硬币 这里的 i 1 和 i
  • linux给用户添加文件夹的使用权限

    添加权限 将目录 opt 及其下面的所有文件 子目录的文件主改成 liuhai chown R liuhai liuhai opt root localhost sudo chown R oracle home 选项 c或 changes
  • postgresql 服务无法启动,日志中报如下错误

    1 postgresql 服务无法启动 日志中报如下错误 磁盘空间足够 无法找到来自源 PostgreSQL 的事件 ID 0 的描述 本地计算机上未安装引发此事件的组件 或者安装已损坏 可以安装或修复本地计算机上的组件 1 使用pg co
  • 因特网中的电子邮件--应用层协议

    因特网中的电子邮件 因特网中的电子邮件系统主要由三部分组成 用户代理 user agent 邮件服务器 mail server 简单邮件传输协议 Simple Mail Transfer Protocol SMTP 邮件服务器为电子邮件系统
  • matlab计算数据MEA与RMSE误差指标

    MEA Mean Absolute Error 均方差 和RMSE Root Mean Square Error 均方根误差 是两个经常使用的误差评价指标 用于评价模型预测值与真实值之间的误差大如其间的误差 1 MEA 均方差 将预测结果与
  • fastadmin列表自动刷新功能

    在fastadmin框架中 将列表自动刷新给屏蔽了 如果要开启的话 有点麻烦 需要去重新修改框架核心的js代码 然后还需要重新进行编译 在看开发文档的时候 发现列表是存在refresh的方法 既然有这个方法在 那么是否能结合JS的定时器来做
  • 源码追踪,记typeAliasesPackage的使用(ruoyi-cloud中一个疑问的启发)

    首先 提一个思考题 在mapper xml文件中写sql的时候 parameterType指明入参类型的时候 为什么只需要写String Long Integer等 而不用写java lang String java lang Long这样
  • 又一新闻,Meta研发了超越chatGPT的新平台LLAMA

    一 Meta 全新大语言模型 LLaMA 正通过种子公开发放 2 月 24 日 Meta 公司发布了新的大模型系列 LLaMA Large Language Model Meta AI Meta 宣称 LLaMA 规模仅为竞争对手 Chat
  • POST请求错误 net::ERR_EMPTY_RESPONSE

    1 问题 最近在学习使用node js express写后台项目 首先Network发送options 成功 其后的post请求状态一直为pending 在网络上搜索许多方式未能解决 过了一段时间后未响应状态转为failed 2 解决 其状
  • Python:全局替换文件夹下所有文件内容的字符串

    代码参数详解 import os def listFiles dirPath 遍历指定文件夹下打印所有的文件 param dirPath 指定遍历的文件夹路径 return 一个列表 包含指定文件夹下所有的文件绝对路径 准备一个空列表 用来
  • 【Unity】热更新之xLua C#调用Lua / 自定义加载器 / 加载并执行AB包中的Lua文件

    最近在学习xLua 和大家分享一下学习笔记 下载xLua xLua的GitHub下载地址 xLua下载 GitHub 点击进入 点击链接进入后 首先点击Code 再点击Download ZIP把压缩包下载下来 下载完后解压得到xLua ma
  • K8s生产环境常见问题处理、答疑(连载、不定期更新)

    文章目录 K8s 常见问题处理 答疑 1 calico一直处于未就绪状态 2 删除dashboard 一直卡在delete 3 k8s dashboard 修改tocken ttl避免频繁输入tocken 4 kubectl 快捷指令 5
  • Separating Axis Theorem (SAT) Explanation

    Separating Axis Theorem SAT Explanation Posted on May 24 2009 Separating Axis Theorem SAT is a technique for calculating
  • 多路I/O转接服务器

    多路IO转接服务器也叫做多任务IO服务器 该类型服务器实现的主旨思想是 不在由应用程序自己监视连接 取而代之由内核替应用程序监视文件 主要使用方法有三种 1 select函数 1 select 能监听的文件描述符个数受限于FD SETSIZ
  • Java哈希(部分)

    1 给定一个字符串s 找到它的第一个不重复的字符 并返沪它的所索引 如果不存在 则返回 1 class Solution public int firstUniqChar String s int array new int 26 for
  • 软件测试职业发展方向

    大家好 我是馨馨紫 软件测试妹纸一枚 有6年的软件测试经验 混过大厂 待过创业公司 独自负责过从0到1的项目测试 也当过测试小组长 今天跟大家分享下软件测试心得 希望对大家有所启发 文章结构如下 一 软件测试概述 二 所需能力模型 三 职业
  • 容器技术在企业落地的最佳实践

    作者 易立 阿里云资深技术专家 导读 近年来 容器技术及相关应用得到了国内外越来越多的关注度 在国外 容器技术已经形成了较成熟的生态圈 而在国内 金融企业 互联网企业 IT 企业积极投入容器技术的应用 本文将重点介绍容器技术在企业落地最佳实
  • uni-app系列:页面跳转以及传递参数

    目录 uniapp实现页面跳转以及跳转后传值过去 一 链接跳转 二 事件跳转 1 uni navigateTo OBJECT 2 uni redirectTo OBJECT 3 uni reLaunch OBJECT 4 uni switc
  • vue的跳转(打开新页面)

    1 router link跳转 直接写上跳转的地址