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
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.
<!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/vue-router@3.5.2/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 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.
<!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/vue-router@3.5.2/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:
