Introduction
When growing internet functions with Vue.js which have many pages and incorporate many options reminiscent of logging in, authentication, carting, in addition to a great deal of CRUD functions, we might want to implement routing sooner or later, which includes redirecting a consumer from one web page to a different both programmatically or once they entry a route through the URL.
On this article, we are going to study the assorted technique of redirecting and routing in Vue.js with sensible code samples.
Prerequisite
Routing in Vue.js is achieved by the usage of the vue-router package deal, which permits us to simply carry out single web page routing inside our Vue software. To implement router redirects in Vue, we should first set up this package deal in our venture, which we are able to do by working the next command in our terminal:
$ npm set up [email protected]
Redirect with Vue
All routes in Vue.js are configured within the router’s configuration file, which is a devoted file for all sorts of routing in Vue. This file is normally discovered underneath /src/router/index.js.
To make use of a route, we have now to declare it within the router configuration file, after which we are able to reference it in different components of the appliance. Routing may be achieved in a wide range of methods, and completely different eventualities could necessitate completely different redirects, however let’s begin with probably the most primary sort of redirect earlier than transferring on to others reminiscent of programmatic, conditional, and error redirects.
When a consumer navigates to the /house route, say it ought to all the time redirect them to the / route, thereby exhibiting the HomePage. This may be achieved through redirects:
const routes = [
{
path: '/',
name: 'Home',
component: HomePage,
},
{
path: '/home',
redirect: '/',
}
];
The primary emphasis is on the second object which takes within the path and redirect choices, when a consumer navigates to the set path it routinely redirects them to the trail set within the redirect choice.
Notice: We are going to discover that the redirect truly replaces the hyperlink, that means after we navigate to /house the URL switches to / thereby exhibiting the part set for the / route.
In a scenario the place we don’t need the URL to vary, however we wish it to point out the part set for the / route, then we are able to make use of an Alias.
Alias
An alias is an choice we are able to add an alias for an current route. In impact, we are able to have a number of routes that work with a specific part, slightly than redirecting to a single route that handles it.
For instance, after we set an alias to /house and the precise path is about to / with a part of HomePage, when a consumer navigates to /house the HomePage part will seem, however the URL stays /house:
{
path: '/',
title: 'Dwelling',
part: HomePage,
alias: '/house',
},
Notice: An alias can take an array of a couple of path and these paths can embrace parameters.
{
path: '/',
title: 'Dwelling',
part: HomePage,
alias: ['/home', '/homepage'],
},
Now – /, /house and /homepage all truly deal with the identical HomePage part!
Redirect Programmatically
We will additionally carry out programmatic redirects, reminiscent of when a button is clicked or an motion is carried out. That is dealt with the router’s push() methodology, which can be utilized anyplace in our software. When the button is clicked within the instance beneath, it takes the consumer to the desired path:
<template>
<h2>Dwelling Web page</h2>
<button @click on="$router.push('/about')">Redirect Me</button>
</template>
This will also be dealt with inside our script tag utilizing the this key phrase:
<template>
<h2>Dwelling Web page</h2>
<button @click on="redirectMe()">Redirect Me</button>
</template>
<script>
export default {
strategies: {
redirectMe() {
this.$router.push('/about');
},
},
};
</script>
It’s vital to notice that the argument could possibly be a string path as we used earlier or a location descriptor object which might settle for title, path, and many others.:
Take a look at our hands-on, sensible information to studying Git, with best-practices, industry-accepted requirements, and included cheat sheet. Cease Googling Git instructions and truly study it!
$router.push('/about')
$router.push({ path: '/about' })
$router.push({ title: 'About' })
Changing The Present URL
As we navigate utilizing programmatic strategies, we’re pushing and including to our browser’s historical past simply because the consumer would by handbook clicking. If we wish to push with out creating a brand new historical past entry – we’ll wish to substitute the entry:
router.push({ path: '/about', substitute: true })
router.substitute({ path: '/about' })
Conditional Redirect
We could wish to redirect customers when a selected command is accomplished, reminiscent of after we wish to authenticate a consumer, verify a product buy, and so forth. That is usually achieved by the usage of conditional statements, reminiscent of:
<template>
<h2>Dwelling Web page</h2>
<button @click on="checkUser()">Authenticate Me</button>
</template>
<script>
export default {
knowledge(){
return{
isLoggedIn: true,
}
},
strategies: {
checkUser() {
if(this.isLoggedIn){
this.$router.push('/dashboard');
}else{
this.$router.push('/login');
}
},
},
};
</script>
We will additionally carry out this with out having to create a technique:
<template>
<h2>Dwelling Web page</h2>
<button @click on="{ isLoggedIn ? $router.push('/dashboard') : $router.push('/login'); }">
Authenticate Me
</button>
</template>
<script>
export default {
knowledge() {
return {
isLoggedIn: true,
};
},
};
</script>
Redirect to a 404 Web page
Lastly, it could be helpful to incorporate the best way to deal with errors when a consumer navigates to the inaccurate route. When a consumer navigates to a route that’s not declared in our router’s configuration file, it shows an empty part, which is usually not the specified conduct.
That is simply dealt with in by catching all routes besides these configured with an everyday expression and assigning them to an error part:
{
path: '/:catchAll(.*)',
title: 'ErrorPage',
part: ErrorPage
}
Conclusion
On this article, we realized the best way to redirect in Vue and the best way to deal with redirects in varied methods.
