Vue Router is a powerful routing library for Vue.js applications. It allows you to define routes and handle navigation in a declarative way. In this tutorial, we'll explore how to use Vue Router with TypeScript to create a robust and maintainable application.

Introduction

Vue Router is a part of the Vue.js ecosystem and is widely used for building dynamic web applications. TypeScript adds static typing to JavaScript, which can help catch errors early in the development process. By combining Vue Router with TypeScript, you can leverage the benefits of both technologies.

Getting Started

To get started with Vue Router in TypeScript, you need to install the necessary dependencies. First, create a new Vue.js project using Vue CLI:

vue create my-vue-router-app

Navigate to the project directory:

cd my-vue-router-app

Install Vue Router:

npm install vue-router@4

Creating Routes

In a Vue.js application, routes are defined in the router directory. Create a new file named index.ts in the src/router directory.

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

interface IRoute extends RouteRecordRaw {
  component: () => Promise<typeof import('*.vue')>;
}

const routes: IRoute[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },
];

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

export default router;

Using Routes in Components

To use routes in your components, you can use the <router-link> component for navigation and <router-view> to render the component associated with the current route.

In your Home.vue component:

<template>
  <div>
    <h1>Welcome to the Home Page</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Home',
};
</script>

In your About.vue component:

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

<script lang="ts">
export default {
  name: 'About',
};
</script>

Handling Navigation

Vue Router provides various methods to handle navigation, such as router.push(), router.replace(), and router.go(). You can use these methods in your components to programmatically navigate between routes.

methods: {
  navigateToAbout() {
    this.$router.push('/about');
  },
}

Adding TypeScript Support

To enable TypeScript support in Vue Router, you need to install the @types/vue-router package:

npm install @types/vue-router

This will provide type definitions for Vue Router, allowing you to use TypeScript with the library.

Conclusion

In this tutorial, we've covered the basics of using Vue Router with TypeScript. By combining these two technologies, you can build powerful and maintainable web applications. For more information on Vue Router and TypeScript, check out the following resources:

Vue Router TypeScript