使用window.open和vue router新开页面

 更新时间:2024年03月12日 11:05:08   作者:鹤渺  
这篇文章主要介绍了使用window.open和vue router新开页面方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

打开新页面,并实现在新开页面中携带参数,可以使用 URLSearchParams 对象,进行参数的拼接和解析,vue router跳转新页面和window.open都可以,几种方式适应于不同场景,URLSearchParams对象是结合window.open使用的。

一、window.open

使用 window.open() 可以在新窗口或新标签页中打开指定的 URL。

参数如下:

1.url(可选):要在新窗口或新标签页中加载的页面的 URL。如果未提供此参数或为空字符串,则新窗口将打开一个空白页面。

2.target(可选):指定在哪里打开链接的目标窗口或标签页。常用的取值包括:

  • _blank:在新标签页或新窗口中打开链接。
  • _self:在当前窗口中打开链接(默认行为)。
  • _parent:在父级窗口中打开链接。
  • _top:在顶级窗口中打开链接。
  • 自定义窗口名称:如果已经存在具有相同名称的窗口,则在该窗口中加载链接,否则会打开一个新的窗口。

3.windowFeatures(可选):一个包含窗口特性的字符串(目前未在项目中使用过),用于指定新窗口的行为和外观。常用的特性包括:

  • width:新窗口的宽度。
  • height:新窗口的高度。
  • left:新窗口的左侧位置。
  • top:新窗口的顶部位置。
  • scrollbars:是否显示滚动条。
  • resizable:新窗口是否可调整大小。
  • fullscreen:是否以全屏模式打开新窗口。
  • 等等。

示例:

//指定新窗口的名称、大小和其他选项window.open('https://www.example.com', '_blank', 'width=800, height=600');  
 
 // 在新标签页中打开指定 URL
window.open('https://www.example.com');
 
// 在具有特定名称的窗口中打开链接(如果不存在,则打开新窗口)
window.open('https://www.example.com', 'myWindow');
 
// 在指定大小的新窗口中打开链接
window.open('https://www.example.com', '_blank', 'width=800, height=600');

注意:

由于浏览器的安全限制,对于弹出窗口的行为,大多数浏览器会进行阻止或拦截。

为了避免被浏览器拦截,打开新窗口的操作必须是由用户的明确操作触发,例如点击按钮,有些如在点击某个链接后,获取一些参数,再跳转到某个地址的行为

可以按照以下进行:

setTimeout(() => window.open(url, "_blank"))

浏览器为了避免弹出广告影响用户,禁用了通过代码调用超链接在新标签打开页面的功能,所以必须是用户的明确行为,点击,长按等操作之类的,但把打开链接的操作放到setTimeout里运行,因为setTimeout是在主线程运行的,所以该操作不会被浏览器认定为代码操作的,所以不会拦截。

二、vue-router

官网:Vue Router | Vue.js 的官方路由

这个比较常见,一般跳转页面携带参数常用两种,query,params

// 字符串路径
router.push('/users/eduardo')
 
// 带有路径的对象
router.push({ path: '/users/eduardo' })
 
// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
 
// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
 
// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })

两者的区别:

1.Query Parameters(查询参数):Query参数是通过URL中的查询字符串来传递的,格式为/path?key1=value1&key2=value2。在Vue Router中,可以使用$route.query来获取和操作查询参数。

示例:

// 跳转到带查询参数的URL
this.$router.push({ path: '/path', query: { key1: 'value1', key2: 'value2' } });
 
// 获取查询参数
console.log(this.$route.query.key1); // 输出:'value1'

query参数适合用于传递可选的、不敏感的参数,如搜索关键字、分页信息等。

2.URL Parameters(路径参数):Path参数是通过URL中的路径段来传递的,格式为/path/:param1/:param2。在Vue Router中,可以使用$route.params来获取和操作路径参数。

示例:

// 跳转到带路径参数的URL
this.$router.push({ path: '/path/value1/value2' });
 
// 获取路径参数
console.log(this.$route.params.param1); // 输出:'value1'

params参数适合用于传递必要的、敏感的参数,如资源ID、用户信息等。

心得:

  • query参数通过查询字符串传递,适合传递可选的、不敏感的参数。
  • params参数通过路径段传递,适合传递必要的、敏感的参数。

三、URLSearchParams

创建一个 URLSearchParams 对象,并使用 append 方法向其中添加多个参数。

然后,使用 toString 方法将 URLSearchParams 对象转换为查询字符串,并将其附加到 URL 上。

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
params.append('param3', 'value3');
 
const url = `https://www.example.com/newpage?${params.toString()}`;
window.open(url);

四、新页面接收参数

接收参数,两种方式都可以,如下:

要获取 URL 参数的值,可以使用 URLSearchParams 对象的 get() 方法

// 假设 URL 为 https://example.com/?name=John&age=25&city=New%20York
 
const urlParams = new URLSearchParams(window.location.search);
 
// 获取单个参数的值
const name = urlParams.get('name');
const age = urlParams.get('age');
const city = urlParams.get('city');
 
console.log(name); // 输出:John
console.log(age); // 输出:25
console.log(city); // 输出:New York

在 Vue 3 中,可以使用 useRouter 方法来获取路由对象,然后通过 query 或者params来获取 URL 参数。

import { useRouter } from 'vue-router';
 
export default {
  setup() {
    const router = useRouter();
 
    // 获取 URL 参数
    const name = router.query.name;
    const age = router.query.age;
    const city = router.query.city;
 
    console.log(name); // 输出:John
    console.log(age); // 输出:25
    console.log(city); // 输出:New York
 
    // 其他逻辑...
 
    return {
      // 返回组件的响应式数据和方法...
    };
  }
};

总结

以上是几种常在开发中使用的几种跳转和新开页面的方式,关于router,在后续里需要更深入学习。

这些仅为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 页面内锚点定位及跳转方法总结(推荐)

    页面内锚点定位及跳转方法总结(推荐)

    这篇文章主要介绍了页面内锚点定位及跳转方法总结,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 详解vue-cli项目开发/生产环境代理实现跨域请求

    详解vue-cli项目开发/生产环境代理实现跨域请求

    这篇文章主要介绍了详解vue-cli项目开发/生产环境代理实现跨域请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 使用vue的transition完成滑动过渡的示例代码

    使用vue的transition完成滑动过渡的示例代码

    这篇文章主要介绍了使用vue的transition完成滑动过渡的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 详解Vue源码学习之双向绑定

    详解Vue源码学习之双向绑定

    这篇文章主要介绍了Vue源码学习之双向绑定,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作

    antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作

    这篇文章主要介绍了antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue created钩子函数与mounted钩子函数的用法区别

    vue created钩子函数与mounted钩子函数的用法区别

    这篇文章主要介绍了vue created钩子函数与mounted钩子函数的用法区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 如何设置Vue全局公共方法

    如何设置Vue全局公共方法

    这篇文章主要介绍了如何设置Vue全局公共方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 解读vue生成的文件目录结构及说明

    解读vue生成的文件目录结构及说明

    本篇文章主要介绍了解读vue生成的文件目录结构及说明,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue-element-admin开发教程(v4.0.0之前)

    vue-element-admin开发教程(v4.0.0之前)

    本文主要介绍了vue-element-admin开发教程(v4.0.0之前),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue前端实现表格数据增查改删功能

    vue前端实现表格数据增查改删功能

    增删改查是我们写项目百分之七十会遇到的代码,下面这篇文章主要给大家介绍了关于vue前端实现表格数据增查改删功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-05-05

最新评论