window.open and vue router new page

Series Article Directory

---

Table of contents

Series Article Directory

foreword

1. window.open

Two, vue-router

3. URLSearchParams

4. The new page receives parameters

Summarize

---

---

foreword

Open a new page and carry parameters in the newly opened page. You can use the URLSearchParams object to splicing and parsing parameters. Vue router can jump to a new page or window.open. The three methods are suitable for different scenarios.

1. window.open

Use to open the specified URL in a new window or new tab. window.open()

The parameters are as follows:

1. url(Optional): The URL of the page to load in a new window or new tab. If this parameter is not provided or is an empty string, the new window will open with a blank page.
2. target(Optional): Specifies where to open the link's target window or tab. Commonly used values ​​include:
   • _blank: Open the link in a new tab or window.
   • _self: Open the link in the current window (default behavior).
   • _parent: Open the link in the parent window.
   • _top: Open the link in a top-level window.
   • Custom window name: If a window with the same name already exists, the link is loaded in that window, otherwise a new window is opened.
3. windowFeatures(optional): A string containing window properties that specify the behavior and appearance of the new window. Commonly used features include:
   • width: The width of the new window.
   • height: The height of the new window.
   • left: The left position of the new window.
   • top: The top position of the new window.
   • scrollbars: Whether to display the scroll bar.
   • resizable: Whether the new window is resizable.
   • fullscreen: Whether to open a new window in full screen mode.
   • etc.

Example:

//指定新窗口的名称、大小和其他选项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');

        Note: Due to browser security restrictions, most browsers will block or block pop-up windows. In order to avoid being intercepted by the browser, the action of opening a new window must be triggered by an explicit user action , such as clicking a button.

Two, vue-router

 Official website: Vue Router | The official routing of Vue.js

This is relatively common. Generally, jump pages carry two parameters, query and 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' })

The difference between the two:

1. Query Parameters (query parameters): Query parameters are passed through the query string in the URL in the format of /path?key1=value1&key2=value2. In Vue Router, $route.queryquery parameters can be fetched and manipulated with .

   Example:

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

   The Query parameter is suitable for passing optional, insensitive parameters, such as search keywords, pagination information, and so on.

2. URL Parameters (path parameters): Path parameters are passed through the path segment in the URL in the format of /path/:param1/:param2. In Vue Router, you can use $route.paramsto get and manipulate path parameters.

   Example:

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

   paramsParameters are suitable for passing necessary and sensitive parameters, such as resource IDs, user information, etc.

Summarize:

• Query parameters are passed through the query string, suitable for passing optional, insensitive parameters.
• paramsParameters are passed through path segments, suitable for passing necessary and sensitive parameters.

3. URLSearchParams

Create a URLSearchParams object and appendadd parameters to it using the method. Then, use toStringthe method to convert the URLSearchParams object to a query string and append it to the 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);

 

4. The new page receives parameters

There are two ways to receive parameters, as follows:

 To get the value of a URL parameter, you can use URLSearchParamsthe object's get()method

// 假设 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

In Vue 3, you can use useRouterthe method to get the route object, and then use querythe property to get the URL parameters.

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 {
      // 返回组件的响应式数据和方法...
    };
  }
};

---

Summarize

The above are several methods of jumping and opening new pages that are often used in development. About the router, we will learn more in-depth in the follow-up.