How to Redirect to Another Page in VueJS ?

Last Updated : 24 Apr, 2024

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() method
Using the router-link component

Using router.push() method

This 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 hook
this.$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:

add1

Using the router-link component

The 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:

ws1

How to redirect to another webpage in HTML?

mguru4c05q

Improve

Article Tags :

How to Redirect to Another Page in VueJS ?

Using router.push() method

Syntax:

Using the router-link component

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?