How to get URL parameters in Vue without routing

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

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

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]
    })
}

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

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!