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

Introduction to Vue Router

Next ►
►

Vue Router is the official router for Vue.js, enabling developers to create single-page applications (SPAs) with multiple views and navigation. It integrates deeply with Vue.js to make building complex applications easier and more manageable.

Key Concepts

  1. Routing: The process of navigating between different views or pages in an application.
  2. Routes: Definitions that map URLs to components.
  3. Router Instance: The main object that manages the routing configuration and navigation.
  4. Router View: A component that renders the matched component for the current route.
  5. Router Link: A component that creates navigation links.

Setting Up Vue Router

To start using Vue Router, you need to install it and configure it in your Vue.js application.

Installation

You can install Vue Router via npm or yarn:

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

Basic Configuration

  1. Create a router.js file: This file will contain the routing configuration.
// src/router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;
  1. Integrate the router with your Vue instance: Import the router configuration and add it to your Vue instance.
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

Router View and Router Link

  • Router View: This component renders the matched component for the current route.
<!-- src/App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
  • Router Link: This component creates navigation links.
<!-- src/components/Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

Practical Example

Let's create a simple Vue application with two pages: Home and About.

  1. Create the Home component:
<!-- src/components/Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>
  1. Create the About component:
<!-- src/components/About.vue -->
<template>
  <div>
    <h1>About</h1>
    <router-link to="/">Go to Home</router-link>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>
  1. Configure the router:
// src/router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;
  1. Integrate the router with the Vue instance:
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

Exercise

Task

Create a Vue application with three pages: Home, About, and Contact. Configure the routes and add navigation links to switch between these pages.

Solution

  1. Create the Contact component:
<!-- src/components/Contact.vue -->
<template>
  <div>
    <h1>Contact</h1>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

<script>
export default {
  name: 'Contact'
};
</script>
  1. Update the router configuration:
// src/router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;
  1. Update the Home and About components to include a link to the Contact page:
<!-- src/components/Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
    <router-link to="/contact">Go to Contact</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>
<!-- src/components/About.vue -->
<template>
  <div>
    <h1>About</h1>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/contact">Go to Contact</router-link>
  </div>
</template>

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

Conclusion

In this section, you learned the basics of Vue Router, including how to set it up, configure routes, and create navigation links. You also practiced creating a simple Vue application with multiple pages. In the next module, we will dive deeper into more advanced routing concepts such as dynamic routing and nested routes.

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