#31 Web Development Frontend: Set URL with 1 or 2 params (ViteJS)

In this article, we will discuss how to set a URL with one or two parameters using ViteJS. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Setting URL with 1 Param

Setting a URL with one parameter in ViteJS is quite simple. You can do this by defining a route with the desired parameter in the route path. For example, if you want to set a URL with a parameter for an article ID, you can define the route like this:

const routes = [ { path: '/article/:id', component: Article } ];

This will match any URL that looks like /article/123, where 123 is the article ID. You can then access this parameter in your component using the $route.params object.

Setting URL with 2 Params

If you need to set a URL with two parameters, you can do so by defining the route path with multiple parameters. For example, if you want to set a URL with parameters for both a user ID and a post ID, you can define the route like this:

const routes = [ { path: '/user/:userId/post/:postId', component: Post } ];

This will match any URL that looks like /user/123/post/456, where 123 is the user ID and 456 is the post ID. You can then access these parameters in your component using the $route.params object.

Setting URLs with parameters in ViteJS allows you to create dynamic and flexible routes in your web application. This can be useful for creating user profiles, displaying specific content, or implementing search functionality.

Overall, setting URLs with parameters in ViteJS is a powerful feature that can enhance the user experience and functionality of your web application. By following the examples provided in this article, you can easily set URLs with one or two parameters in your ViteJS project.