Vue Router in Vue.js with TypeScript

Vue.js is a popular JavaScript framework for building user interfaces. It provides a simple and easy-to-learn syntax for creating complex applications. Vue Router is a tool that allows you to add routing functionality to your Vue.js applications. In this tutorial, we will learn how to use Vue Router in Vue.js with TypeScript.

Prerequisites

To follow this tutorial, you should have a basic understanding of Vue.js and TypeScript. You should also have Node.js and npm installed on your machine.

Getting Started

First, let's create a new Vue.js project using the Vue CLI. Open your terminal and run the following command:

vue create vue-router-typescript

Select the default preset and wait for the project to be created. Once the project is created, navigate to the project directory and install the Vue Router package using npm:

cd vue-router-typescript
npm install vue-router

Next, let's add TypeScript support to our project. We can do this by adding the TypeScript plugin to our project using the Vue CLI. Run the following command in your terminal:

vue add @vue/typescript

This will install the necessary packages and configure our project to use TypeScript.

Creating the Routes

Now, let's create some routes for our application. Open the src/router/index.ts file and add the following code:

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

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

export default router

This code creates two routes for our application: a home route and an about route. The Home and About components are imported from their respective files. We also create a router instance using the createRouter function from Vue Router and pass in our routes as an array.

Creating the Views

Now, let's create the views for our application. Create two new files in the src/views directory: Home.vue and About.vue. Add the following code to the Home.vue file:

<template>
  <div class="home">
    <h1>Home</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Home',
  setup() {
    return {}
  }
})
</script>

And add the following code to the About.vue file:

<template>
  <div class="about">
    <h1>About</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'About',
  setup() {
    return {}
  }
})
</script>

These components simply render a header with the name of the view.

Using the Router

Now that we have created our routes and views, let's use the router in our application. Open the src/App.vue file and replace the existing code with the following:

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

<script lang="ts">
import { defineComponent } from 'vue'
import router from '@/router'

export default defineComponent({
name: 'App',
setup() {
return {
router
}
}
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

This code adds two `router-link` components that will navigate to our home and about routes when clicked. We also add a `router-view` component that will render the component for the current route.

Testing the Application

Our application is now complete. Let's test it by running the following command in our terminal:

npm run serve

This will start the development server and open our application in a new browser tab. Click on the "Home" and "About" links to verify that the router is working correctly.

Conclusion

In this tutorial, we learned how to use Vue Router in Vue.js with TypeScript. We created some routes and views for our application, and then used the router to navigate between them. With this knowledge, you can create more complex applications that require routing functionality.