In this article, we are going to understand the basic concept of routing in the VueJS 3.0 application.
src/main.js:
Create A VueJS 3.0 Sample Application:
Let's understand routing concepts by doing a sample VueJS 3.0 application, so as a first step create a sample application.
Command To Install Vue CLI Globally On Your System
npm run -g @vue/cli
Command To Create Vue App:
vue create your_app_name
The vue-router available as a separate library, so to install it run the following command.
Command To Install Vue Router Library(For Vue3.0)
npm install vue-router@4
After successfully installing the route library we can observe the route library reference in the package.json file.
Create Vue Components:
Let's create sample components like 'Home' and 'About'. We will load this component based on a route like pages.
src/components/Home.vue:
<template> <div> My Home Page </div> </template> <script> export default { } </script>src/components/About.vue:
<template> <div> About Page </div> </template> <script> export default { } </script>
Configure Routing:
Let's configure vue routing into our application.
src/appRouter.js:
import {createRouter, createWebHistory} from 'vue-router'; import Home from "./components/Home.vue"; import About from "./components/About.vue"; const routes = [ { path: "/", component: Home }, { path: "/about", component: About }, ]; export const router = createRouter({ history: createWebHistory(), routes: routes });
- The 'createRouter()' method creates an instance of the vue router that loads from the library 'vue-router'.
- The 'createRouter()' method takes javascript object literal as an input parameter as configurations for routing. The configuration is like 'history', 'routes'.
- The 'history' property takes 'createWebHistory()' as input value, the 'createWebHistory' maintains the application navigation history.
- The 'routes' property takes an array of route values as input parameters.
src/main.js:
import { createApp } from 'vue' import App from './App.vue' import * as routeConfig from './appRouter.js' const app = createApp(App); app.use(routeConfig.router); app.mount('#app');
- The 'routeConfig' loaded from 'appRoute.js' and configured into vue instance pipeline.
router-view Component:
The router-view component is a built-in vue component. This is a functional component that renders the matched component for the given path or route. Components rendered in can also contain their own, which will render components for the nested path.
Now let's update App.vue file to use the 'reouter-view' component
src/App.vue:
<template> <router-view></router-view> </template> <script> export default { name: 'App', components: { } } </script>
- (Line: 2) Used 'router-view' component.
router-link Component:
The 'router-link' is the default vue component, the navigate the user to the specified path or route. The target location specified with the 'to' property.
Now let's update our App.vue file by adding a bootstrap menu that uses the 'router-link' component to display menus.
src/App.vue:(Html Part)
<template> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <router-link to="/" class="nav-link">Home</router-link> </li> <li class="nav-item"> <router-link class="nav-link" to="/about">About</router-link> </li> </ul> </div> </nav> <router-view></router-view> </template>
- (Line: 6&9) Used 'router-link' components for menu management. The 'to' property will be used to assign route value.
Navigating From Vue Code:
We can manage routing from inside of the component programmatically. Since we have configured our routing instance into the vue pipeline we can access it as 'this.$router'.
Let's update our Home.vue component where we will add a button on clicking but we navigate to the About.vue component.
src/components/Home.vue:
<template> <div> My Home Page <button type="button" v-on:click="go()">Go To Details</button> </div> </template> <script> export default { methods:{ go(){ this.$router.push('/about'); } } } </script>
- The 'this.$.router.push()' navigates user to specified path pag.
Support Me!
Buy Me A Coffee
PayPal Me
Wrapping Up:
Hopefully, I think this article delivered some useful information on Vue Router. I love to have your feedback, suggestions, and better techniques in the comment section below.
This is just amazing explanation, I got the basic routing concept.
ReplyDeleteThank you.
This is Perfect explanation.
ReplyDeletePlease explain more about vuejs3.
API, Session, Auth etc.
Thank you.
That sounds good.
ReplyDelete