Home > Web Front-end > Front-end Q&A > How to get URL parameters in Vue without routing

How to get URL parameters in Vue without routing

PHPz
Release: 2023-04-12 09:43:38
Original
948 people have browsed it

With the continuous development of front-end technology, Vue, as one of the more popular front-end frameworks, has been widely used in the industry. In Vue, obtaining URL parameters through routing is a common requirement, and it is also a common problem encountered in daily development. However, sometimes we don't want to obtain URL parameters through routing, perhaps due to some special business requirements. This article will introduce how Vue obtains URL parameters without routing.

First, let us understand how routing obtains URL parameters. In Vue, we can get URL parameters through this.$route.query. For example, if the parameter in the URL is ?id=1, it can be obtained in the following way:

this.$route.query.id  // 1
Copy after login

But in some cases, we may not want to obtain the URL parameters through routing, possibly due to some complex business logic Or design plan, etc. In this case, we can get the URL parameters through the window object.

The following is a simple example, assuming our URL is http://localhost:8080?id=1.

First, we need to use native JavaScript code to obtain the URL. The code is as follows:

let url = window.location.search
Copy after login

In the above code, window.location.search can obtain URL parameters, including special characters such as "?" and "=".

Next, we need to intercept the parameter values ​​in the URL. The code is as follows:

let params = {}
if (url.indexOf('?') !== -1) {
    let arr = url.split('?')[1].split('&')
    arr.forEach((item) => {
        let val = item.split('=')
        params[val[0]] = val[1]
    })
}
Copy after login

In the above code, we first use the if statement to determine whether the URL contains the "?" character. If included, use the split method to separate out the parameter part, and use the loop and split methods to separate each key-value pair. Finally, we store the parameter name and parameter value in an object in the form of key-value pairs.

Finally, we can use the params object to obtain URL parameter values. For example, for the above URL, we can get the parameter value in the following way:

params.id  // 1
Copy after login

In summary, we can get the URL parameters through the window object without using routing. Of course, which approach to use depends on your specific business needs and design options.

In short, Vue is a very popular front-end framework. In the process of learning Vue, you will inevitably encounter the need to obtain URL parameters. Through the two methods introduced in this article, you will master the skills of obtaining URL parameters without routing and better cope with complex business needs.

The above is the detailed content of How to get URL parameters in Vue without routing. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template