window.open和vue router新开页面

系列文章目录

目录

系列文章目录

前言

一、window.open

二、vue-router

三、URLSearchParams

四、新页面接收参数

总结

前言

打开新页面，并实现在新开页面中携带参数，可以使用 URLSearchParams 对象，进行参数的拼接和解析，vue router跳转新页面和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：是否以全屏模式打开新窗口。
   • 等等。

示例：

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

        注意：由于浏览器的安全限制，对于弹出窗口的行为，大多数浏览器会进行阻止或拦截。为了避免被浏览器拦截，打开新窗口的操作必须是由用户的明确操作触发，例如点击按钮。

二、vue-router

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

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

1.  
   // 字符串路径
2.  
   router.push('/users/eduardo')
3.  
    
4.  
   // 带有路径的对象
5.  
   router.push({ path: '/users/eduardo' })
6.  
    
7.  
   // 命名的路由，并加上参数，让路由建立 url
8.  
   router.push({ name: 'user', params: { username: 'eduardo' } })
9.  
    
10.  
    // 带查询参数，结果是 /register?plan=private
11.  
    router.push({ path: '/register', query: { plan: 'private' } })
12.  
     
13.  
    // 带 hash，结果是 /about#team
14.  
    router.push({ path: '/about', hash: '#team' })

两者的区别：

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

   示例：

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

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

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

   示例：

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

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

总结：

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

三、URLSearchParams

创建一个 URLSearchParams 对象，并使用 append 方法向其中添加多个参数。然后，使用 toString 方法将 URLSearchParams 对象转换为查询字符串，并将其附加到 URL 上。

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

四、新页面接收参数

接收参数，两种方式都可以，如下：

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

1.  
   // 假设 URL 为 https://example.com/?name=John&age=25&city=New%20York
2.  
    
3.  
   const urlParams = new URLSearchParams(window.location.search);
4.  
    
5.  
   // 获取单个参数的值
6.  
   const name = urlParams.get('name');
7.  
   const age = urlParams.get('age');
8.  
   const city = urlParams.get('city');
9.  
    
10.  
    console.log(name); // 输出：John
11.  
    console.log(age); // 输出：25
12.  
    console.log(city); // 输出：New York

在 Vue 3 中，可以使用 useRouter 方法来获取路由对象，然后通过 query 属性来获取 URL 参数。

1.  
   import { useRouter } from 'vue-router';
2.  
    
3.  
   export default {
4.  
   setup() {
5.  
   const router = useRouter();
6.  
    
7.  
   // 获取 URL 参数
8.  
   const name = router.query.name;
9.  
   const age = router.query.age;
10.  
    const city = router.query.city;
11.  
     
12.  
    console.log(name); // 输出：John
13.  
    console.log(age); // 输出：25
14.  
    console.log(city); // 输出：New York
15.  
     
16.  
    // 其他逻辑...
17.  
     
18.  
    return {
19.  
    // 返回组件的响应式数据和方法...
20.  
    };
21.  
    }
22.  
    };

总结

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

这篇好文章是转载于：学新通技术网