How to Redirect to Another Page in VueJS ? Last Updated : 24 Apr, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Redirecting to another page is a common requirement in web development especially in the Vue.js applications. It allows users to navigate seamlessly between the different views or pages within the application. These are the following methods: Table of Content Using router.push() methodUsing the router-link componentUsing router.push() methodThis approach involves programmatically navigating to another route using the Vue Router's router.push() method. we have created a button on clicking that will call a function that will redirect it to the "about" page. Syntax:// Inside a method or lifecycle hookthis.$router.push('/path/to/redirect');Example: This example shows the implementation of the above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Redirect Button</title> <script src= "https://cdn.jsdelivr.net/npm/vue@2"> </script> <script src= "https://unpkg.com/[email protected]/dist/vue-router.js"> </script> </head> <body> <div id="app"> <button @click="redirectToPage">Redirect</button> </div> <script> const routes = [ { path: '/about', component: { template: '<div>About Page</div>' } } ]; const router = new VueRouter({ routes }); const app = new Vue({ el: '#app', router, methods: { redirectToPage() { this.$router.push('/about'); } } }); </script> </body> </html> Output: Using the router-link componentThe Vue Router provides a built-in component called router-link in which is used to the navigate between routes declaratively in the templates. On clicking the link it will redirect to the new navigation that is "about" page. That about navigation is rendering as a component. Syntax:<router-link :to="'/path/to/redirect'">Link Text</router-link>Example: This example shows the implementation of the above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Redirect to About Page</title> <script src= "https://cdn.jsdelivr.net/npm/vue@2"> </script> <script src= "https://unpkg.com/[email protected]/dist/vue-router.js"> </script> </head> <body> <div id="app"> <router-link :to="'/about'"> Go to About Page</router-link> </div> <script> const About = { template: '<div>About Page</div>' }; const router = new VueRouter({ routes: [ { path: '/about', component: About } ] }); new Vue({ router, el: '#app' }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Redirect to Another Webpage using JavaScript? M mguru4c05q Follow Improve Article Tags : JavaScript Web Technologies Vue.JS Similar Reads How to Redirect to Another Page in ReactJS ? In ReactJS, when you need to move users from one page to another, we can use the built-in React Router library, which is designed specifically for handling navigation within a React application.ApproachUse the Navigate component: In React Router v6, the Navigate component helps us to redirect users 6 min read How to redirect a page to another page in HTML ? Redirecting a page in HTML involves sending users to a different web page automatically or upon interaction. This can be achieved using the anchor tag's href attribute or the meta tag with the http-equiv attribute set to refresh and the content attribute specifying the time delay and destination URL 3 min read How to redirect to another webpage in HTML? It is often required to redirect to another webpage on loading a webpage, for example, due to the contents being moved to the new webpage. Demonstrated here are two simple methods to redirect to another webpage on load. Method-1: Using http-equiv attribute of the meta tag in HTML.Syntax:<meta htt 2 min read How to Redirect to Another Webpage using JavaScript? JavaScript can redirects the users from current page to another webpage (different URL) with and without requiring any manual action (like clicking a link). To redirect to another weboage in JavaScript we need to manipulate the window.location object and it will allow us to navigate programmatically 2 min read How to Redirect 404 errors to a page in Express.js ? Express Js is a web application framework based on Node.js web server functionality that helps us to create web servers with lesser complexity and in a well-organized manner. Express provides routing services that help us in creating application endpoints that respond based on the HTTP request metho 3 min read How to Add Redirects in Apache? The redirects are one of the most important configurations that allow a web server to redirect traffic from one URL to another. This would help you forward visitors to a new location whenever content changes its location, or it will let you show multiple URLs under one canonical URL. In this article 3 min read Like