Vue Router is a powerful routing library for Vue.js applications. It allows you to create routes, define components, and link them together. In this tutorial, we will learn how to install and use the Vue Router.
The first step is to install the Vue Router. To do this, you will need to use a package manager such as npm or yarn. To install the Vue Router using npm, run the following command:
npm install vue-routerOnce the installation is complete, you can import the Vue Router into your application. To do this, add the following line to your main.js file:
import VueRouter from 'vue-router'You can then register the Vue Router with your Vue instance by adding the following line:
Vue.use(VueRouter)Once the Vue Router is installed and registered, you can create a router instance. To do this, create a new file called router.js and add the following code:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: []
})
export default routerThis code creates a new Vue Router instance and sets the mode to 'history'. This will ensure that the URLs are clean and do not contain the hash (#) symbol.
Once the router instance is created, you can define the routes. To do this, add the following code to the router.js file:
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]This code defines two routes: '/' and '/about'. The component property specifies the component that should be rendered when the route is matched. In this example, the Home component will be rendered when the '/' route is matched, and the About component will be rendered when the '/about' route is matched.
Once the routes are defined, you can add the router to the Vue instance. To do this, add the following line to the main.js file:
new Vue({
router,
render: h => h(App)
}).$mount('#app')This code adds the router to the Vue instance and mounts the App component to the DOM.
Once the router is added to the Vue instance, you can use the router-link component to create links between routes. To do this, add the following code to the template of the component:
<router-link to="/about">About</router-link>This code creates a link to the '/about' route. When the link is clicked, the About component will be rendered.
The router-view component is used to render the component for the matched route. To use the router-view component, add the following code to the template of the component:
<router-view></router-view>This code will render the component for the matched route. For example, if the '/about' route is matched, the About component will be rendered.
In this tutorial, we learned how to install and use the Vue Router. We installed the Vue Router, created a router instance, defined routes, added the router to the Vue instance, used the router-link component, and used the router-view component. With the Vue Router, you can easily create routes and link them together.