Creating Routes in Vue.js

Vue.js is a powerful JavaScript framework that allows developers to build interactive single-page applications. One of the key features of Vue.js is its routing capability, which allows developers to create different routes (or pages) in their application. In this tutorial, we'll learn how to create routes in Vue.js. Let's get started!

Prerequisites

Before we proceed, make sure you have the following installed on your system:

Node.js and npm
Vue CLI

If you've not installed Vue CLI, you can do so by running the following command in your terminal:

npm install -g @vue/cli

Creating a New Vue Project

First, we'll create a new Vue.js project. Open your terminal and run the following command:

vue create vue-routing

This will create a new Vue.js project named vue-routing. Navigate into the new project directory:

cd vue-routing

Installing Vue Router

Vue Router is the official router for Vue.js. It's a separate package from Vue.js and needs to be installed separately. You can install Vue Router by running the following command:

npm install vue-router

After installing Vue Router, we need to import it into our main.js file:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Creating Routes

To create routes in Vue.js, we first need to define our components. Let's create two simple components, Home and About. In your src directory, create a new folder named components. Inside this folder, create two new files: Home.vue and About.vue.

In Home.vue, add the following code:

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

In About.vue, add the following code:

<template>
  <div>
    <h1>About</h1>
  </div>
</template>

These two files represent two different "pages" in our application.

Next, we need to define our routes. Routes are defined in a routes array. Each route is an object with two properties: path and component. The path property is the URL where the route will be accessible, and the component property is the Vue component that will be displayed at that path.

In your src directory, create a new file named router.js and add the following code:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

In the above code, we've defined two routes. The Home component will be displayed when the user navigates to the root URL (/), and the About component will be displayed when the user navigates to /about.

Lastly, we need to tell Vue.js to use this router. In your main.js file, add the following code:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

That's it! You've now created routes in Vue.js. To test your application, run the following command in your terminal:

npm run serve

Now, you should be able to navigate to http://localhost:8080/ to see the Home component, and http://localhost:8080/about to see the About component.

Remember, Vue.js routing is a powerful feature that allows you to create single-page applications with multiple views. This tutorial only scratches the surface of what's possible with Vue.js routing. To learn more, check out the Vue Router documentation.

Creating Routes in Vue.js

Prerequisites​

Creating a New Vue Project​

Installing Vue Router​

Creating Routes​

Prerequisites

Creating a New Vue Project

Installing Vue Router

Creating Routes