One of the main parts of your application is router management. Here, it is possible to bring together infinite component combinations in a single place.
A router is capable of coordinating component rendering and dictating where the application should be, depending on the URL. There are many ways to increase the customization of vue-router. You can add route guards to check whether specific routes are navigatable by access level or fetch data before entering the route to manage errors on your application.
In this chapter, you will learn how to create application routes, dynamic routes, alias and credited routes, and nested router views. We'll also look at how to manage errors, create router guards, and lazy load your pages.
In this chapter, we'll cover the following recipes:
Creating a simple route
Creating a programmatic navigation
Creating a dynamic router path
Creating a route alias
Creating a route redirect
Creating a nested router view
Creating a 404 error page
Creating an authentication middleware
Lazy loading your pages asynchronously
Technical requirements
In this chapter, we will be using Node.js and Vue-CLI.
> npm install -g windows-build-tools
To install Vue-CLI, you need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm install -g @vue/cli @vue/cli-service-global
Creating a simple route
In your application, you can create an infinite combination of routes that can lead to any number of pages and components.
vue-router is the maintainer of this combination. We need to use this to set instructions on how to create paths and lay down routes for our visitors.
In this recipe, we will learn how to create an initial route that will lead to a different component.
Getting ready
The pre-requisite for this recipe is as follows:
Node.js 12+
The Node.js global objects that are required are as follows:
@vue/cli
@vue/cli-service-global
How to do it...
To create a Vue-CLI project, follow these steps:
We need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue create initial-routes
The CLI will ask some questions that will help with the creation of the project. You can use the arrow keys to navigate, the Enter key to continue, and the Spacebar to select an option.
There are two methods for starting a new project. The default method is a basic Babel and ESLint project without any plugins or configuration, and the Manually mode, where you can select more modes, plugins, linters, and options. We will go for Manually:
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
❯ Manually select features
Now we are asked about the features that we will want on the project. Those features are some Vue plugins such as Vuex or Vue Router (Vue-Router), testers, linters, and more. Select Babel, Router, and Linter / Formatter:
? Check the features needed for your project: (Use arrow keys)
❯ Babel
TypeScript
Progressive Web App (PWA) Support
❯ Router
Vuex
CSS Pre-processors
❯ Linter / Formatter
Unit Testing
E2E Testing
Now Vue-CLI will ask if you want to use the history mode on the route management. We will choose Y (yes):
? Use history mode for router? (Requires proper server setup for
index fallback in production) (Y/n) y
Continue this process by selecting a linter and formatted. In our case, we will select ESLint + Airbnb config:
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
❯ ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
After the linting rules are set, we need to define when they are applied to your code. They can be either applied on save or fixed on commit:
? Pick additional lint features: (Use arrow keys)
Lint on save
❯ Lint and fix on commit
After all those plugins, linters, and processors are defined, we need to choose where the settings and configs are stored. The best place to store them is in a dedicated file, but it is also possible to store them in the package.json:
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
Now you can choose whether you want to make this selection a preset for future projects, so you don't need to reselect everything again:
? Save this as a preset for future projects? (y/N) n
Our recipe will be divided into five parts:
Creating the NavigationBar component
Creating the contact page
Creating the about page
Changing the application's main component
Creating the routes
Let's get started.
Creating the NavigationBar component
Now we are going to create the NavigationBar component that will be used in our application.
Single file component <script> section
In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
Create a navigationBar.vue file in the src/components folder and open it.
Create a default export object of the component, with the Vue property name:
<script>
export default {
name: 'NavigationBar',
};
</script>
Single file component <template> section
In this part, we will create the <template> section of the single file component. Follow these instructions to create the component correctly:
Create a div HTML element with the id attribute defined as "nav", and inside of it, create three RouterLink components. Those components will point to the Home, About, and Contact routes. In the RouterLink component, we will add a to attribute that will be defined as the route for each component, respectively, and define the text content as the name of the menu:
<div id="nav">
<router-link to="/">
Home
</router-link> |
<router-link to="/about">
About
</router-link> |
<router-link to="/contact">
Contact
</router-link>
</div>
Creating the contact page
We need to make sure the contact page gets rendered when the user enters the /contact URL. To do so, we need to create a single file component to be used as the contact page.
Single file component <script> section
In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
In the src/views folder, create a new file called contact.vue and open it.
Create a default export object of the component, with the Vue property name:
<script>
export default {
name: 'ContactPage',
};
</script>
Single file component <template> section
In this part, we will create the <template> section of the single file component. Follow these instructions to create the component correctly:
Create a div HTML element, with the class attribute defined as "contact".
Inside of the <h1> HTML element, add a text context displaying the current page:
<template>
<div class="contact">
<h1>This is a contact page</h1>
</div>
</template>
Creating the about page
We need to make the contact page be rendered when the user enters the /about URL. In the following subsections, we will create the Single File component for the about page.
Single file component <script> section
In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
In the src/views folder, create a new file called About.vue and open it.
Create a default export object of the component, with the Vue property name:
<script>
export default {
name: 'AboutPage',
};
</script>
Single file component <template> section
In this part, we will create the <template> section of the single file component. Follow these instructions to create the component correctly:
Create a div HTML element with the class attribute defined as "about" .
Inside of it, place an <h1> element with a text context displaying the current page:
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
Changing the application's main component
After creating the pages and the navigation bar, we need to change the application's main component to be able to render the routes and have the navigation bar at the top.
Single file component <script> section
In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
Open App.vue in the src folder.
Import the NavigationBar component:
import NavigationBar from './components/navigationBar.vue';
In the Vue components property, declare the imported NavigationBar:
export default {
components: { NavigationBar },
};
Single file component <template> section
In this part, we will create the <template> section of the single file component. Inside the div HTML element, add the NavigationBar component and the RouterView component:
<template>
<div id="app">
<navigation-bar />
<router-view/>
</div>
</template>
Creating the routes
Now we need to make the routes available in the application. To do so, first, we need to declare the routes and the components that the routes will render. Follow these steps to create your Vue application router correctly:
In the src/router folder, open the index.js file.
Import the Contact component page:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Contact from '../views/contact.vue';
In the routes array, we need to create a new route object. This object will have the path property defined as '/contact', name defined as 'contact', and component pointing to the imported Contact component:
{
path: '/contact',
name: 'contact',
component: Contact,
},
To run the server and see your component, you need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Here is your component rendered and running:
How it works...
When vue-router is added to Vue as a plugin, it starts to watch for changes on window.location.pathname, and other URL properties, to check the weight of the current URL on the browser against the list of URLs on your router configurations.
In this particular case, we are using a direct URL and a non-dynamic URL. Because of that, the vue-router plugin only needs to check direct matches of the URL paths and doesn't need to weigh the possible matches against a regex validator.
After a URL is matched, the router-view component acts as a dynamic component and renders the component we defined on the vue-router configuration.
See also
You can find more information about vue-router at https://router.vuejs.org/.
You can find more information about Vue CLI at https://cli.vuejs.org/.
Creating a programmatic navigation
When using vue-router, it is also possible to change the current route of the application through function execution, without the need for special vue-router components for creating links.
Using programmatic navigation, you can make sure all the route redirections can be executed anywhere in your code. Using this method enables the usage of special route directions, such as passing parameters and navigation with the route name.
In this recipe, we will learn how to execute a programmatic navigation function, using the extra possibilities it provides.
Getting ready
The pre-requisite for this recipe is as follows:
Node.js 12+
The Node.js global objects that are required are as follows:
@vue/cli
@vue/cli-service-global
How to do it...
To start our component, we can use the Vue project with Vue-CLI that we created in the 'Creating a simple route' recipe, or we can start a new one.
To start a new one, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue create route-project
Choose the manual features and add the Router as a needed feature, as indicated in the 'How to do it...' section in the 'Creating a simple route' recipe.
Our recipe will be divided into two parts:
Changing the application's main component
Changing the contact view
Let's get started.
Changing the application's main component
We will start with the App.vue file. We will add a programmatic navigation function to be executed after a timeout, which will be added to the component life cycle hook.
Single file component <script> section
In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
Open App.vue in the src folder.
Add a mounted property:
mounted() {}
In the mounted property, we need to add a setTimeout function, which will execute the $router.push function. When executed, this function receives a JavaScript object as an argument, with two properties, name, and params:
mounted() {
setTimeout(() => {
this.$router.push({
name: 'contact',
params: {
name: 'Heitor Ribeiro',
age: 31,
},
});
}, 5000);
},
Changing the contact view
On the contact view, we need to add an event listener, which will grab the route change and execute an action.
Single file component <script> section
In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
Open contact.vue in the src/views folder.
Add a new mounted property:
mounted() {}
In this property, we will add a verification that will check whether there are any parameters on the $route.params object and display an alert with that $route.params:
mounted() {
if (Object.keys(this.$route.params).length) {
alert(`Hey! I've got some parameter!
${JSON.stringify(this.$route.params)}`);
}
},
To run the server and see your component, you need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Here is your component rendered and running:
How it works...
The $router.push function, when executed, tells vue-router to change where the application is, and in this process, you are passing down some parameters to the new router that will replace the current route. In those parameters, there's a property called params, which sends a group of parameters to the new router.
When entering this new router, all the parameters that we will have called from within the router will be available in the $route.params object; there, we can use it in our view or component.
There's more...
In the programmatic navigation, it's possible to navigate through the routers, adding them to the browser history with the $router.push function, but there are other functions that can be used too.
The $router.replace function will replace the user navigation history for a new one, making it unable to go back to the last page.
$router.go is used to move the user navigation history in steps. To go forward, you need to pass positive numbers and to go backward, you will need to pass negative numbers.
See also
You can find more information about vue-router programmatic navigation at https://router.vuejs.org/guide/essentials/navigation.html.
Creating a dynamic router path
Adding a route to your application is a must, but sometimes you need more than just simple routes. In this recipe, we'll take a look at how dynamic routes come into play. With dynamic routes, you can define custom variables that can be set via the URL, and your application can start with those variables already defined.
In this recipe, we will learn how to use a dynamic router path on a CRUD list.
Getting ready
The pre-requisite for this recipe is as follows:
Node.js 12+
The Node.js global objects that are required are as follows:
@vue/cli
@vue/cli-service-global
How to do it...
To start our component, we will use the Vue project with Vue-CLI that we completed in the 'Creating a CRUD interface with axios and Vuesax' recipe in Chapter 5, Fetching Data from the Web via HTTP Requests. In the following steps, we will add vue-router to the project through the Vue UI dashboard:
First, you will need to open vue ui. To do this, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue ui
There, you will need to import the project by locating the project folder. After importing vue ui, you will be redirected to the dashboard.
Add vue-router to the plugins by going to the plugins management page and clicking on the Add vue-router button. Then, click on the Continue button.
The Vue-CLI will automatically install and configure vue-router on the project for us. We now need to create each view for the List, View, and Edit pages.
To start view development, we will go first by the user list route. In each route, we will deconstruct the old component that we had made, and recreate it as a view.
Our recipe will be divided into eight parts:
Changing the application's main component
Changing the route mixin
Axios instance configuration
User list view
User create view
User information view
User update view
Creating dynamic routes
Let's get started.
Changing the application's main component
After adding the vue-router plugin, App.vue will change. We need to revert the changes made by the installation of the vue-router. This is needed because when vue-ui adds the vue-router plugin, it will change App.vue, adding an example code that we don't need.
Single file component <template> section
In this part, we will create the <template> section of the single file component. Follow these instructions to create the component correctly:
Open App.vue in the src folder.
Remove everything, leaving just the div#app HTML element and the router-view component:
<template>
<div id="app">
<router-view/>
</div>
</template>
Changing the route mixin
In the previous recipe, we used a changeComponent mixin. Now that we are going to work with routes, we need to change this mixin to a changeRoute mixin and alter its behavior. In the following steps, we will change how the mixin works, to be able to change the route instead of the component:
In the src/mixin folder, rename changeComponent.js to changeRoute.js and open it.
We will remove the changeComponent method and create a new one called changeRoute. This new method will receive two arguments, name and id. The name argument is the route name, as set in the vue-router configuration and the id will be the user id that we will pass a parameter in the route change. This method will execute $router.push, passing those arguments as the parameters:
export default {
methods: {
async changeRoute(name, id = 0) {
await this.$router.push({
name,
params: {
id,
},
});
},
}
}
Axios instance configuration
To fetch the data in the MirageJS server, we will need to define some options in our axios instance. Now, in the following steps, we will configure the axios instance to work with the new routering system:
In the src/http folder, open the baseFetch.js file.
At the creator of the localApi instance of axios, we will need to add an options object, passing the baseURL property. This baseURL will be the current browser navigation URL:
const localApi = createAxios({
baseURL: `${document.location.protocol}//${document.location.host}`,
});
User list view
To create our view, we will extract the code from the list.vue component and reshape it as a page view.
Single file component <script> section
In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
Move the list.vue file from components to the views folder, and rename it List.vue.
Remove the old changeComponent mixin import and import the new changeRoute mixin:
import changeRouteMixin from '@/mixin/changeRoute';
At the Vue mixins property, we need to replace changeComponent with changeRoute:
mixins: [changeRouteMixin],
In the getAllUsers and deleteUser methods, we need to remove ${window.location.href} from the getHttp and deleteHttp function parameters:
methods: {
async getAllUsers() {
const { data } = await getHttp(`api/users`);
this.userList = data;
},
async deleteUser(id) {
await deleteHttp(`api/users/${id}`);
await this.getAllUsers();
},
}
Single file component <template> section
In this part, we will create the <template> section of the single file component. Follow these instructions to create the component correctly:
We need to wrap the VsCard component and its child contents with a VsRow and VsCol component. The VsCol component will have the vs-type attribute defined as 'flex', vs-justify defined as 'left', vs-align defined as 'left', and vs-w defined as 12:
<template>
<vs-row>
<vs-col
vs-type="flex"
vs-justify="left"
vs-align="left"
vs-w="12">
<vs-card... />
</vs-col>
</vs-row>
</template>
On the actions buttons, we will change the changeComponent functions to changeRoute:
<vs-td :data="data[index].id">
<vs-button
color="primary"
type="filled"
icon="remove_red_eye"
size="small"
@click="changeRoute('view', data[index].id)"
/>
<vs-button
color="success"
type="filled"
icon="edit"
size="small"
@click="changeRoute('edit', data[index].id)"
/>
<vs-button
color="danger"
type="filled"
icon="delete"
size="small"
@click="deleteUser(data[index].id)"
/>
</vs-td>
At the VsCard footer, we need to change the actions buttons, changeComponent method to the changeRoute method:
<template slot="footer">
<vs-row vs-justify="flex-start">
<vs-button
color="primary"
type="filled"
icon="fiber_new"
size="small"
@click="changeRoute('create')"
>
Create User
</vs-button>
</vs-row>
</template>
User create view
To create our view, we will extract the code from the create.vue component and reshape it as a page view.
Single file component <script> section
In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
Move the create.vue file from components to the views folder, and rename it Create.vue.
Remove the old changeComponent mixin import and import the new changeRoute mixin:
import changeRouteMixin from '@/mixin/changeRoute';
At the Vue mixins property, we need to replace changeComponent with changeRoute:
mixins: [changeRouteMixin],
On the getUserById method, we need to remove ${window.location.href} from the postHttp function URL and change the changeComponent functions to changeRoute:
async createUser() {
await postHttp(`/api/users`, {
data: {
...this.userData,
}
});
this.changeRoute('list');
},
Single file component <template> section
In this part, we will create the <template> section of the single file component. Follow these instructions to create the component correctly:
We need to wrap the VsCard component and its child contents with a VsRow and VsCol component. The VsCol component will have the vs-type attribute defined as 'flex', vs-justify defined as 'left', vs-align defined as 'left', and vs-w defined as 12:
<template>
<vs-row>
<vs-col
vs-type="flex"
vs-justify="left"
vs-align="left"
vs-w="12">
<vs-card... />
</vs-col>
</vs-row>
</template>
On the VsCard footer, we need to change the Cancel button's changeComponent functions to changeRoute:
<vs-button
color="danger"
type="filled"
icon="cancel"
size="small"
style="margin-left: 5px"
@click="changeRoute('list')"
>
Cancel
</vs-button>
User information view
To create our view, we will extract the code from the view.vue component and reshape it as a page view.
Single file component <script> section
In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
Move the view.vue file from src/components to the src/views folder and rename it as View.vue.
Remove the old changeComponent mixin import and import the new changeRoute mixin:
import changeRouteMixin from '@/mixin/changeRoute';
At the Vue mixins property, we need to replace changeComponent with changeRoute:
mixins: [changeRouteMixin],
Create a new computed property in the component object, with the property userId, which will return $route.params.id:
computed: {
userId() {
return this.$route.params.id;
},
},
On the getUserById method, we need to remove ${window.location.href} from the getHttp function URL:
methods: {
async getUserById() {
const { data } = await getHttp(`api/users/${this.userId}`);
this.userData = data;
},
}
Single file component <template> section
In this part, we will create the <template> section of the single file component. Follow these instructions to create the component correctly:
We need to wrap the VsCard component and its child contents with a VsRow and VsCol component. The VsCol component will have the vs-type attribute defined as 'flex', vs-justify defined as 'left', vs-align defined as 'left', and vs-w defined as 12:
<template>
<vs-row>
<vs-col
vs-type="flex"
vs-justify="left"
vs-align="left"
vs-w="12">
<vs-card... />
</vs-col>
</vs-row>
</template>
On the VsCard footer, we need to change the back button changeComponent functions to changeRoute:
<vs-button
color="primary"
type="filled"
icon="arrow_back"
size="small"
style="margin-left: 5px"
@click="changeRoute('list')"
>
Back
</vs-button>
User update view
To create our view, we will extract the code from the update.vue component and reshape it as a page view.
Single file component <script> section
In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
Move the update.vue file from src/components to the src/views folder and rename it Edit.vue.
Remove the old changeComponent mixin import and import the new changeRoute mixin:
import changeRouteMixin from '@/mixin/changeRoute';
At the Vue mixins property, we need to replace changeComponent with changeRoute:
mixins: [changeRouteMixin],
Create a new computed property in the component object, with the userId property , which will return $route.params.id:
computed: {
userId() {
return this.$route.params.id;
},
},
On the getUserById and updateUser methods, we need to remove
${window.location.href} from the getHttp and patchHttp function URLs and change the changeComponent functions to changeRoute:
methods: {
async getUserById() {
const { data } = await getHttp(`api/users/${this.userId}`);
this.userData = data;
},
async updateUser() {
await patchHttp(`api/users/${this.userData.id}`, {
data: {
...this.userData,
}
});
this.changeRoute('list');
},
},
Single file component <template> section
In this part, we will create the <template> section of the single file component. Follow these instructions to create the component correctly:
We need to wrap the VsCard component and its child contents with a VsRow and VsCol component. The VsCol component will have the vs-type attribute defined as 'flex', vs-justify defined as 'left', vs-align defined as 'left', and vs-w defined as 12:
<template>
<vs-row>
<vs-col
vs-type="flex"
vs-justify="left"
vs-align="left"
vs-w="12">
<vs-card... />
</vs-col>
</vs-row>
</template>
On the VsCard footer, we need to change the Cancel button's change Component functions to changeRoute:
<vs-button
color="danger"
type="filled"
icon="cancel"
size="small"
style="margin-left: 5px"
@click="changeRoute('list')"
>
Cancel
</vs-button>
Creating dynamic routes
Now, with our page views created, we need to create our routes and make them accept parameters, transforming them into dynamic routes. In the following steps, we will create the dynamic routes of the application:
Open index.js in the src/router folder.
First, we need to import the four new pages – List, View, Edit, Create, and Update:
import List from '@/views/List.vue';
import View from '@/views/View.vue';
import Edit from '@/views/Edit.vue';
import Create from '@/views/Create.vue';
On the routes array, we will add a new route object for each one of the pages that were imported. In this object, there will be three properties: name, path, and component.
For the list route, we will define name as 'list', path as '/', and component as the imported List component:
{
path: '/',
name: 'list',
component: List,
},
On the view route, we will define name as 'view', path as '/view/:id', and component as the imported View component:
{
path: '/view/:id',
name: 'view',
component: View,
},
In the edit route, we will define name as 'edit', path as '/edit/:id', and component as the imported Edit component:
{
path: '/edit/:id',
name: 'edit',
component: Edit,
},
Finally, at the create route, we will define name as 'create', path as '/create', and component as the imported Create component:
{
path: '/create',
name: 'create',
component: Create,
},
When the VueRouter is created, we will add the mode options property and set it as 'history':
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
To run the server and see your component, you need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Here is your component rendered and running:
List View Route - / will be your user list page, containing a list of all the users in your application and buttons to view, edit, and delete it, as well as a button to create a new user:
User View Route - /view/:id will be your user view page, where it's possible to view your user information, such as the user's name, email, country, birthday, and phone number:
User Edit Route - /update/:id will be your user edit page, where it's possible to edit your user's information, changing the user's name, email, country, birthday, and phone number:
Create User Route - /update/:id will be your user creation page, where it's possible to create a new user on the system:
How it works...
When vue-router is created, and the route is passed for matching, the router analysis check for the best match for the route based on a RegEx for defining a weight on each route.
When a route is defined and has a variable in its path, you need to add a : before the variable parameter. This parameter is passed down to the component in the $route.params property.
See also
You can find more information about the dynamic router matching at https://router.vuejs.org/guide/essentials/dynamic-matching.html.
Creating a route alias
Every application is a living organism – it evolves, mutates, and changes day by day. Sometimes these evolutions can come through the form of a router change, for better naming or for a deprecated service. In vue-router, it's possible to make all those changes invisible to the user, so when they use old links, they still can access the application.
In this recipe, we will learn how to create a route alias for our application and use it.
Getting ready
The pre-requisite for this recipe is as follows:
Node.js 12+
The Node.js global objects that are required are as follows:
@vue/cli
@vue/cli-service-global
How to do it...
To start our component, we will use the Vue project with Vue-CLI that we completed in the 'Creating a dynamic router path' recipe, or we can start a new one.
To start a new one, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue create http-project
Choose the manual features and add router as a required feature, as indicated in the 'How to do it...' section of the 'Creating a simple route' recipe.
Now, in the following steps, we will create the router alias:
Open index.js in the src/router folder.
At the list object, we will change the path property from '/' to '/user' and for the alias property, we will set '/':
{
path: '/user',
name: 'list',
alias: '/',
component: List,
},
In the view object, we will change the path property from '/view/:id' to '/user/:id' and we will set the alias property to '/view/:id':
{
path: '/user/:id',
name: 'view',
alias: '/view/:id',
component: View,
},
In the edit object, we will change the path property from '/edit/:id' to '/user/edit/:id' and set the alias property to '/edit/:id':
{
path: '/user/edit/:id',
name: 'edit',
alias: '/edit/:id',
component: Edit,
},
Finally, in the create object, we will change the path property from '/create' to '/user/create' and set the alias property to '/create':
{
path: '/user/create',
name: 'create',
alias: '/create',
component: Create,
},
How it works...
When the user enters your application, vue-router will try to match paths to the one that the user is trying to access. If there is a property called alias in the route object, this property will be used by the vue-router to maintain the old route under the hood and use the alias route instead. If an alias is found, the component of that alias is rendered, and the router remains as the alias, not showing the user the change, making it transparent.
In our scenario, we made a transformation for our application to now handle all the users called on the /user namespace, but still maintaining the old URL structure so that if an old visitor tries to access the website, they will be able to use the application normally.
See also
You can find more information about the vue-router alias at https://router.vuejs.org/guide/essentials/redirect-and-alias.html#alias.
Creating route redirects
Router redirect works almost the same as the router alias, but the main difference is that the user is truly redirected to the new URL. Using this process, you are able to manage how the new route can be loaded.
Getting ready
The pre-requisite for this recipe is as follows:
Node.js 12+
The Node.js global objects that are required are as follows:
@vue/cli
@vue/cli-service-global
How to do it...
To start our component, we will use the Vue project with Vue-CLI that we completed in the 'Creating a route alias' recipe, or we can start a new one.
To start a new one, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue create http-project
Choose the manual features and add Router as a required feature, as indicated in the 'How to do it...' steps in the 'Creating a simple route' recipe.
Now, in these steps, we will create the router redirect rules:
Open index.js in the src/router folder.
Insert a new route object at the end of the routes array. This object will have two properties, path and redirect. In the path property, we need to define the path that the user will enter, '/create-new-user', and in redirect, the path that the user will be redirected to, in this case, '/user/create':
{
path: '/create-new-user',
redirect: '/user/create',
},
Create a new object, and this object will have two properties, path and redirect. In the path property, we need to define the path that the user will enter, '/users', and in the redirect, we will create an object with a property called name and will put the value as 'list':
{
path: '/users',
redirect: {
name: 'list',
},
},
Create a new object. This object will have two properties, path and redirect. In the path property, we need to define the path that the user will enter, '/my-user/:id?', and in the redirect, we will create a function, which will receive an argument, to, which is an object of the current route. We need to check whether the user ID is present in the route, to redirect the user to the edit page. Otherwise, we will redirect them to the user list:
{
path: '/my-user/:id?',
redirect(to) {
if (to.params.id) {
return '/user/:id';
}
return '/user';
},
},
Finally, in the end, we will create a route object with two properties, path and redirect. In the path property, we need to define the path that the user will enter, '/*', and in the redirect, we need to define the redirect property as '/':
{
path: '*',
redirect: '/',
},
How it works...
As we define redirect as a new route, it works similar to the alias, but the redirect property can receive three types of arguments: a string when redirecting for the route itself, objects when redirecting with other parameters such as the name of the route, and last but not least, the function type, which redirect can handle and return one of the first two objects so the user can be redirected.
See also
You can find more information about the vue-router redirect at https://router.vuejs.org/guide/essentials/redirect-and-alias.html#redirect.
Creating a nested router view
In vue-router, nested routes are like a namespace for your routes, where you can have multiple levels of routes inside the same route, use a base view as the main view, and have the nested routes rendered inside.
In a multi-module application, this is used to handle routes like CRUD, where you will have a base route, and the children will be the CRUD views.
In this recipe, you will learn how to create a nested route.
Getting ready
The pre-requisite for this recipe is as follows:
Node.js 12+
The Node.js global objects that are required are as follows:
@vue/cli
@vue/cli-service-global
How to do it...
To start our component, we will use the Vue project with Vue-CLI that we used in the 'Creating a dynamic router path' recipe, or we can start a new one.
To start a new one, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue create http-project
Choose the manual features and add Router as a required feature, as indicated in the 'How to do it...' section in the 'Creating a simple route' recipe.
Our recipe will be divided into two parts:
Creating the router-view on the layout
Changing the router files
Let's get started.
Creating the router-view on the layout
When using vue-router with children's routes, we need to create the main view, which will have a special component called RouterView. This component will render the current router inside the layout or page you are rendering.
Now, in the following steps, we will create the layout for the pages:
In the src/views folder, we need to create a new folder called user and move the Create, Edit, List, and View pages to this new folder.
Create a new file called Index.vue in the user folder and open it.
In the single file component <template> section, add a router-view component:
<template>
<router-view/>
</template>
<script>
export default {
name: 'User',
}
</script>
Changing the router files
We will create a new file that will manage the user's specific routes, which will help us to maintain the code and make it cleaner.
User routes
In the following steps, we will create routes for the user:
Create a new file called user.js in the src/router folder.
Import the Index, List, View, Edit, and Create views:
import Index from '@/views/user/Index.vue';
import List from '@/views/user/List.vue';
import View from '@/views/user/View.vue';
import Edit from '@/views/user/Edit.vue';
import Create from '@/views/user/Create.vue';
Create an array and make it the default export of the file. In this array, add a route object, with four properties – path, name, component, and children. Set the path property as '/user', define the name property as 'user', define component as the imported Index component, and finally, define the children property as an empty array:
export default [
{
path: '/user',
name: 'user',
component: Index,
children: [],
},
]
In the children property, add a new route object with three properties – path, name, and component. Define path as '', name as 'list', and finally, define the component property as the imported List component:
{
path: '',
name: 'list',
component: List,
},
Create a route object for the view route and use the same structure as the last route object. Define the path property as ':id', define name as 'view', and define component as the imported View component:
{
path: ':id',
name: 'view',
component: View,
},
Create a route object for the edit route and use the same structure as the last route object. Define the path property as 'edit/:id', define name as 'edit', and define component as the imported Edit component:
{
path: 'edit/:id',
name: 'edit',
component: Edit,
},
Create a route object for the create route, using the same structure as the last route object. Define the path property as 'create', define name as 'create' , and define component as the imported Create component:
{
path: 'create',
name: 'create',
component: Create,
},
Router manager
In the following steps, we will create the router manager that will control all the routes on the application:
Open the index.js in the src/router folder.
Import the newly created user.js file in the src/router folder:
import Vue from 'vue';
import VueRouter from 'vue-router';
import UserRoutes from './user';
In the routes array, add the imported UserRoutes as a destructed array:
const routes = [
...UserRoutes,
{
path: '*',
redirect: '/user',
},
];
How it works...
vue-router provides the ability to use child routes as internal components of a current view or layout. This gives the possibility to create an initial route with a special layout file, and render the child component inside this layout through the RouterView component.
This technique is commonly used for defining a layout in an application and setting a namespace for the modules where the parent route can have a set of specific orders that will be available for every one of its children.
See also
You can find more information about nested routes at https://router.vuejs.org/guide/essentials/nested-routes.html#nested-routes.
Creating a 404 error page
There will be some occasions when your user may try to enter an old link or enter a typo and won't get to the correct route, and this should lead them directly to a not found error.
In this recipe, you will learn how to handle a 404 error in vue-router.
Getting ready
The pre-requisite for this recipe is as follows:
Node.js 12+
The Node.js global objects that are required are as follows:
@vue/cli
@vue/cli-service-global
How to do it...
To start our component, we will use the Vue project with Vue-CLI that we used in the 'Creating a nested router view' recipe, or we can start a new one.
To start a new one, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue create http-project
Choose the manual features and add Router as a required feature, as indicated in the 'How to do it...' section in the 'Creating a simple route' recipe.
Our recipe will be divided into two parts:
Creating the NotFound view
Changing the router files
Let's get started.
Creating the NotFound view
We need to create a new view to be displayed for the user when there is no matching route on the application. This page will be a simple, generic page.
Single file component <template> section
In this part, we will create the <template> section of the single file component. Follow these instructions to create the component correctly:
In the src/views folder, create a new file called NotFound.vue and open it.
Create a VsRow component and inside of it create four VsCol components. All of those components will have the attribute vs-w defined as 12 and class as text-center:
<vs-row>
<vs-col vs-w="12" class="text-center">
<!-- Icon -->
</vs-col>
<vs-col vs-w="12" class="text-center">
<!-- Title -->
</vs-col>
<vs-col vs-w="12" class="text-center">
<!-- Text -->
</vs-col>
<vs-col vs-w="12" class="text-center">
<!-- Button -->
</vs-col>
</vs-row>
On the first VsCol component, we will add a VsIcon component, and set the attribute icon as sentiment_dissatisfied and define the size as large:
<vs-icon
icon="sentiment_dissatisfied"
size="large"
/>
In the second VsCol component, we will add a title for the page:
<h1>Oops!</h1>
In the third VsCol component, we need to create the text that will be placed on the page:
<h3>The page you are looking for are not here anymore...</h3>
Finally, on the fourth VsCol component, we will add the VsButton component. This button will have the attribute type defined as relief and to defined as '/':
<vs-button
type="relief"
to="/"
>
Back to Home...
</vs-button>
Single file component <style> section
In this part, we will create the <style> section of the single file component. Follow these instructions to create the component correctly:
Add the scoped tag to the <style> tag:
<style scoped>
</style>
Create a new rule named .text-center, with the text-align property defined as center and margin-bottom defined as 20px;:
.text-center {
text-align: center;
margin-bottom: 20px;
}
Changing the router files
After we have created the view, we need to add it to the router and make it available to the user. To do it, we will need to add the view route into the router manager.
In these steps, we will change the router manager, to add the new error page:
Open index.js in the src/router folder.
Import the NotFound component:
import Vue from 'vue';
import VueRouter from 'vue-router';
import UserRoutes from './user';
import NotFound from '@/views/NotFound';
In the routes array, after UserRoutes, add a new route object with two properties, path and redirect. Define the path property as '/' and the redirect property as '/user':
{
path: '/',
redirect: '/user'
},
For the not found page, we need to create a new route object that needs to be placed in the last position in the routes array. This route object will have two properties, path, and component. The path property will be defined as '*' and component as the imported NotFound view:
{
path: '*',
component: NotFound,
},
To run the server and see your component, you need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Here is your component rendered and running:
How it works...
vue-router tries to find the best match for the URL that the user wants to access; if there isn't a match, vue-router will use the '*' path as the default value for these scenarios, where the * represents any value that the user has entered that is not in the router lists.
Because the process of matching in vue-router is determined by the weight of the route, we need to place the error page at the very bottom, so vue-router needs to pass in every possible route before actually calling the NotFound route.
See also
You can find more information about handling 404 errors in the vue-router history mode at https://router.vuejs.org/guide/essentials/history-mode.html#caveat.
Creating and applying authentication middleware
In vue-router, it's possible to create router guards – functions that run each time a router is changed. Those guards are used as middleware in the router management process. It's common to use them as an authentication middleware or session validators.
In this recipe, we will learn how to create authentication middleware, add metadata to our routes to make them restricted, and create a login page.
Getting ready
The pre-requisite for this recipe is as follows:
Node.js 12+
The Node.js global objects that are required are as follows:
@vue/cli
@vue/cli-service-global
How to do it...
To start our component, we will use the Vue project with Vue-CLI that we used in the 'Creating a 404 error page' recipe, or we can start a new one.
To start a new one, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue create http-project
Choose the manual features and add Router as a required feature, as indicated in the 'How to do it...' section in the 'Creating a simple route' recipe.
Our recipe will be divided into three parts:
Creating the authentication middleware
Adding the metadata and the middleware to the router
Attaching the middleware to vue-router and creating the login page
Let's get started.
Creating the login view
The login view will be the page that the user will see if they are not authenticated. We will construct a simple page with two inputs inside – a card and a button.
Single file component <script> section
In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
In the src/views folder, create a new file called Login.vue and open it.
Create a data property, containing username, password, and error:
data: () => ({
username: '',
password: '',
error: false,
}),
Then create the methods property with a method called userSignIn. This method will validate if the username and password data are complete. If it is, it will create a new key called 'auth' in sessionStorage, with encrypted stringified JSON of the username data. Then, set error to false and execute $router.replace to redirect the user to the user list '/user'. If any of the fields do not pass in any of the validations, the method will define the error as true and return false:
methods: {
userSignIn() {
if (this.username && this.password) {
window.sessionStorage.setItem('auth',
window.btoa(JSON.stringify({
username: this.username
})
)
);
this.error = false;
this.$router.replace('/user');
}
this.error = true;
return false;
},
}
Single file component <template> section
In this part, we will create the <template> section of the single file component. Follow these instructions to create the component correctly:
Create a div.container HTML element with a VsRow component inside. The VsRow component will have the attribute vs-align defined as "center" and vs-justify defined as "center":
<div class="container">
<vs-row
vs-align="center"
vs-justify="center"
>
</vs-row>
</div>
Inside the VsRow component, add a VsCol component with the attribute vs-lg defined as 4, vs-sm defined as 6, and vs-xs defined as 10. Then, inside the VsCol component, we will create a VsCard component with the style attribute defined as margin: 20px;:
<vs-col
vs-lg="4"
vs-sm="6"
vs-xs="10"
>
<vs-card
style="margin: 20px;"
>
</vs-card>
</vs-col>
Inside the VsCard component, create a dynamic <template> with the slot named header, an h3 HTML element, and your title:
<template slot="header">
<h3>
User Login
</h3>
</template>
After that, create a VsRow component with the attribute vs-align defined as "center", vs-justify defined as "center", and two VsCol components inside of it, with the attribute vs-w defined as 12:
<vs-row
vs-align="center"
vs-justify="center"
>
<vs-col vs-w="12">
</vs-col>
<vs-col vs-w="12">
</vs-col>
</vs-row>
On the first VsCol component, we will add a VsInput component, with the attribute danger defined as the data error value, danger-text defined as the text that will display on error, label defined as "Username", placeholder defined as "Username or e-mail", and the v-model directive bound to username:
<vs-input
:danger="error"
danger-text="Check your username or email"
label="Username"
placeholder="Username or e-mail"
v-model="username"
/>
In the second VsCol component, we will add a VsInput component, with the attribute danger defined as the data error value, danger-text defined as the text that will display on error, label defined as "Password", type defined as password, placeholder defined as "Your password", and the v-model directive bound to password:
<vs-input
:danger="error"
label="Password"
type="password"
danger-text="Check your password"
placeholder="Your password"
v-model="password"
/>
Finally, in the card footer, we need to create a dynamic <template> with the slot named footer. Inside this <template>, we will add a VsRow component with the vs-justify attribute defined as flex-start and insert a VsButton with the attribute color defined as success, type defined as filled, icon defined as account_circle, size defined as small and the @click event listener targeted to the userSignIn method:
<template slot="footer">
<vs-row vs-justify="flex-start">
<vs-button
color="success"
type="filled"
icon="account_circle"
size="small"
@click="userSignIn"
>
Sign-in
</vs-button>
</vs-row>
</template>
Single file component <style> section
In this part, we will create the <style> section of the single file component. Follow these instructions to create the component correctly:
First, we need to make this section scoped, so the CSS rules won't affect any other component of the application:
<style scoped></style>
Then, we need to add the rules for the container class and the VsInput component:
<style scoped>
.container {
height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.vs-input {
margin: 5px;
}
</style>
To run the server and see your component, you need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Here is your component rendered and running:
Creating the middleware
All vue-router middleware can also be referred to as navigation guards, and they can be attached to the application route changes. Those changes have some hooks that you can apply to your middleware. The authentication middleware takes place before the router changes, so we can handle everything and send the user to the correct route.
In the src/router folder, create a new folder called middleware, then create and open a new file called authentication.js.
In this file, we will create a default export function that will have three function parameters – to, from, and next. The to and from parameters are objects, and the next parameter is a callback function:
export default (to, from, next) => {
};
We need to check whether the route that we are being redirected to has an authenticated meta property set to true and whether we have a sessionStorage item with the 'auth' key. If we pass those validations, we can execute the next callback:
if (to.meta.authenticated && sessionStorage.getItem('auth')) {
return next();
}
Then, if the first validation didn't pass, we need to check whether the router that we are redirecting the user to has the authenticated meta property and check whether it's a false value. If the validation did pass, we will execute the next callback:
if (!to.meta.authenticated) {
return next();
}
Finally, if none of our validations pass, execute the next callback, passing '/login' as an argument:
next('/login');
Adding the metadata and the middleware to the router
After creating our middleware, we need to define which routes will be authenticated and which routes won't. Then we have to import the middleware to the router and define it when it is executed:
Open user.js in the src/router folder.
In each route object, add a new property called meta. This property will be an object with an authenticated key and a value defined as true. We need to do this to every route – even the children's routes:
import Index from '@/views/user/Index.vue';
import List from '@/views/user/List.vue';
import View from '@/views/user/View.vue';
import Edit from '@/views/user/Edit.vue';
import Create from '@/views/user/Create.vue';
export default [
{
path: '/user',
name: 'user',
component: Index,
meta: {
authenticated: true,
},
children: [
{
path: '',
name: 'list',
component: List,
meta: {
authenticated: true,
},
},
{
path: ':id',
name: 'view',
component: View,
meta: {
authenticated: true,
},
},
{
path: 'edit/:id',
name: 'edit',
component: Edit,
meta: {
authenticated: true,
},
},
{
path: 'create',
name: 'create',
component: Create,
meta: {
authenticated: true,
},
},
],
},
]
Open index.js in the src/router folder.
Import the newly created middleware and the Login view component:
import Vue from 'vue';
import VueRouter from 'vue-router';
import UserRoutes from './user';
import NotFound from '@/views/NotFound';
import Login from '@/views/Login';
import AuthenticationMiddleware from './middleware/authentication';
Create a new route object for the login page view. This route object will have path set to '/login', name defined as 'login', component defined as Login, and the meta property will have the authenticated key with the value set to false:
{
path: '/login',
name: 'login',
component: Login,
meta: {
authenticated: false,
},
},
On the error handling route, we'll define the meta property authenticated as false because the login view is a public route:
{
path: '*',
component: NotFound,
meta: {
authenticated: false,
},
},
Finally, after the creation of the router constructor, we need to inject the middleware in the beforeEach execution:
router.beforeEach(AuthenticationMiddleware);
How it works...
Router guards work as middleware; they have a hook that is executed in each life cycle of the vue-router process. For the purposes of this recipe, we chose the beforeEach hook to add our middleware.
In this hook, we checked whether the user was authenticated and whether the user needed authentication to navigate the route or not. After checking these variables, we continued the process by sending the user to the route they needed.
See also
You can find more information about vue-router router guards at https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards.
Lazy loading your pages asynchronously
Components can be loaded when needed, and so can routes. Using lazy loading techniques with vue-router allows more code-splitting and smaller final bundles in your application.
In this recipe, we will learn how to transform routes in order to load them asynchronously.
Getting ready
The pre-requisite for this recipe is as follows:
Node.js 12+
The Node.js global objects that are required are as follows:
@vue/cli
@vue/cli-service-global
How to do it...
To start our component, we will use the Vue project with Vue-CLI that we used in the 'Creating an authentication middleware' recipe, or we can start a new one.
To start a new one, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue create http-project
Choose the manual features and add Router as a required feature, as indicated in the 'How to do it...' section in the 'Creating a simple route' recipe.
Our recipe will be divided into two parts:
Updating the router manager
Updating the user routes
Let's get started.
Updating the router manager
To update the router manager, follow these instructions:
Open the index.js file in the src/router folder.
In each route that has a component property, we will transform the direct attribution of the component to a new function. This will be an arrow function returning the import() method of webpack:
{
path: '/login',
name: 'login',
component: () => import('@/views/Login'),
meta: {
authenticated: false,
},
},
Repeat the process on each one of the route objects that has a component property.
Updating the user routes
To update the user routes, follow these instructions:
Open the user.js file in the src/router folder.
In each route that has a component property, we will transform the direct attribution of the component to a new function. This will be an arrow function returning the import() method of webpack:
{
path: '/user',
name: 'user',
component: () => import('@/views/user/Index.vue'),
meta: {
authenticated: true,
},
children: [],
},
Repeat the process on each one of the route objects that has a component property.
How it works...
In ECMAScript, export and import are objects with predefined values when we use the export default method. This means that when we import a new component, this component is already being pointed to the default export of that file.
To carry out the lazy loading process, we need to pass a function that will be executed at runtime, and the return of that function will be the part of the code that webpack divides in the bundling process.
When we call this function in vue-router, instead of the direct component import, vue-router does a validation check that the present component import is a function and needs to be executed. After the execution of the function, the response is used as the component that will be displayed on the user's screen.
Because the webpack import() method is asynchronous, this process can happen alongside other code execution, without tempering or blocking the main thread of the JavaScript VM.
See also
You can find more information about vue-router lazy loading at https://router.vuejs.org/guide/advanced/lazy-loading.html.
You can find more information about webpack code-splitting at https://webpack.js.org/guides/code-splitting/.
You can find more information about the ECMAScript dynamic import proposal at https://github.com/tc39/proposal-dynamic-import.