In this article, we will look at how to implement a catch-all route to handle the page not found error and display a custom 404 page in the Vue application. In the router configuration, we can specify a path /:notFound and also define a NotFound component to display the 404 custom page. const router = createRouter({ history: createWebHistory(), routes: [ { // ... }, { path: "/:notFound", component: NotFound, }, ], }); The /:notFound will match any string in the URL and display the NotFound component....

In this article, we will look at how to redirect to another page using the routes configuration. For this, we make use of the redirect option and set it’s value to redirecting URL. For example, const router = createRouter({ history: createWebHistory(), routes: [ { path: "/", redirect: "/products", }, { //.... }, ], }); With the above configuration, a user visiting the / URL will be redirected to /products page....

In Vue, it is possible to pass dynamic route parameters as props. In this article, we will at how to implement them with an example. We will begin by creating a new application using Vue CLI. ❯ vue create props-params-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application. ❯ cd props-params-demo ❯ npm run serve This will run our server on port 8080 by default http://localhost:8080/...

In this article, we will look at how to implement dynamic routes in Vue application using the vue-router package. We will begin by creating a new application using Vue CLI. ❯ vue create dynamic-routes-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application. ❯ cd dynamic-routes-demo ❯ npm run serve This will run our server on port 8080 by default http://localhost:8080/...

We can navigate to a page when a button is clicked by using the $router property provided by the vue-router package. Specifically, $router comes with a push method that can be used for navigation to a different page. Let us look at an example to see how this works. We will begin by creating a new application using Vue CLI. ❯ vue create programmatic-navigation-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application....

When using the <router-link> component of vue-router, it automatically applies two CSS classes called .router-link-active and .router-link-exact-active. The .router-link-active class gets applied even if there is a partial match in URL whereas, .router-link-exact-active gets applied only when there is an exact match of the path. In this article, we will look at how to style an active link using the .router-link-active class. We will begin by creating a new application using Vue CLI....

To implement routing in a Vue application, we have to make use of the package vue-router. In this article, we will look at how to install the required package and also implementing routing in Vue application. We will begin by creating a new application using Vue CLI. ❯ vue create routing-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application....

We can make an HTTP request on page load by using the lifecycle method created(). The created() hook basically gets called when the components get created. The data properties are set up before the created() hook is called, making it a better option to make an external API request to initialize data properties. In this article, we will look at how to make an HTTP request when a page is loaded in Vue using created() lifecycle method....

In this article, we will look at how to make an HTTP request in Vue using axios library. We will begin by creating a new application using Vue CLI. ❯ vue create axios-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application. ❯ cd axios-demo ❯ npm run serve This will run our server on port 8080 by default http://localhost:8080/...

In this article, we will look at how to make a HTTP request in Vue using fetch API. We will begin by creating a new application using Vue CLI. ❯ vue create http-request-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application. ❯ cd http-request-demo ❯ npm run serve This will run our server on port 8080 by default http://localhost:8080/...