The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Setting Up Vue Router

Next ►
►

In this section, we will cover how to set up Vue Router in your Vue.js application. Vue Router is the official router for Vue.js, enabling you to create single-page applications with navigation and dynamic routing.

Prerequisites

Before we start, ensure you have:

  • Node.js and npm installed on your machine.
  • A basic understanding of Vue.js and how to create a Vue application.

Steps to Set Up Vue Router

  1. Install Vue Router

First, you need to install Vue Router. You can do this using npm or yarn.

npm install vue-router@next
# or
yarn add vue-router@next

  1. Create a Vue Application

If you don't already have a Vue application, you can create one using Vue CLI.

vue create my-vue-app
cd my-vue-app

  1. Set Up the Router

Create a router directory in the src folder and add an index.js file inside it.

mkdir src/router
touch src/router/index.js

  1. Configure Routes

In the src/router/index.js file, configure your routes. Here’s an example with two simple routes:

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

  1. Create View Components

Create the Home.vue and About.vue components in the src/views directory.

mkdir src/views
touch src/views/Home.vue
touch src/views/About.vue

Add some basic content to these components:

Home.vue

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the Home Page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

About.vue

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the About Page.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

  1. Integrate Router with Vue Application

In your src/main.js file, import the router and add it to your Vue application.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');

  1. Update App Component

Update your App.vue to include the <router-view> component, which will render the matched component for the current route.

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
nav {
  margin-bottom: 20px;
}
nav a {
  margin-right: 10px;
}
</style>

  1. Run Your Application

Now, you can run your application to see Vue Router in action.

npm run serve

Open your browser and navigate to http://localhost:8080. You should see the Home page. Click on the "About" link to navigate to the About page.

Summary

In this section, you learned how to set up Vue Router in a Vue.js application. You installed Vue Router, configured routes, created view components, and integrated the router with your Vue application. This setup allows you to create a single-page application with multiple views and navigation.

Next, we will explore dynamic routing, where you will learn how to create routes with dynamic segments and handle route parameters.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved