Introduction
Routing becomes an important feature to put in place when you have many components. Thanks to the awesome Vue.js team, this is easy using vue-router.
In this tutorial, you will see how to use vue-router while building a simple Vue.js application.
Set Up the Application
You will make use of Vue-CLI to set up your application for this tutorial. If you do not have it installed already on your machine, you can do so by running:
npm install -g vue-cli
With that done, you can set up your application using the command below.
vue init webpack router-app
You are going to be asked some questions. One of these questions is: Install vue-router? For that, enter y.
Navigate to your project folder from your terminal:
cd router-app
Run the command to install all dependencies:
npm install
Start your development server by running:
npm run dev
If you want to install vue-router manually, you can use the command below.
npm install vue-router --save
Integrate Vue-Router
When using Vue-CLI, the router gets activated by default. You can see that in your src/router/index.js file.
#src/router/index.js
import Vue from 'vue' // 1
import Router from 'vue-router' // 2
import HelloWorld from '@/components/HelloWorld' // 3
Vue.use(Router) // 4
export default new Router({ // 5
routes: [
{
path: '/',
name: 'Hello',
component: HelloWorld
}
]
})
- Vue is imported from vue.
- Router is imported from the vue-router package.
- HelloWorld is imported from the components folder. We’ll talk more about this later.
- Router is mounted as middleware to your project.
- A default route configuration is created. The route is an array of a JavaScript object. It consists of a path, name, and component. The path gets appended to the URL of your web application. The route created above is meant for the home page. You can change the path to /hello, and it will no longer work for the home page. It will only be triggered when you visit the /hello path of your application. The component tells the route the component you want to load when that path is visited. This is the reason you imported the HelloWorld component. This route is exported as Router.
The exported Router has to be imported in your src/main.js file. This is important for the routes to work. This is taken care of when working with Vue-CLI. Your src/main.js should look like this:
#src/main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' // 1 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, // 2 template: '<App/>', components: { App } })- The router is imported from your router folder.
- The imported router is used when creating a new Vue instance.
Standard Routes
The route you saw above is an example of a standard route. A standard route is one having a path, component, and name. Let’s create our own route. Try this part out yourself using the flow below.
- Create a new component called Pack. You need to have some dummy text.
- Go to your src/router/index.js, import the new component you created, and add a new path.
- Open your browser and point to the new path.
I bet you were able to do that on your own. Let’s try it out together.
Here is what my Pack component looks like.
#src/components/Pack.vue
<template>
<div class="hello">
<h1>Pack Component</h1>
<p>This is a pack component. It is supposed to be a pack of wolves, but the wolves got trap in this tiny component</p>
</div>
</template>
<script>
export default {
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
