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的跳转(打开新页面) 的相关文章

随机推荐

  • 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跳转 直接写上跳转的地址