Basic Routing

Vue comes with an official router package, Vue Router.

When installing Vue 3, you are given an option to also install Vue Router. Just incase you skipped this option, you can also use NPM to get Vue Router in your project.

Install Vue Router

npm

npm install vue-router@4

yarn

yard add vue-router@4

Add the Router

In the main.js file we need to instantiate the router:

import { createApp } from 'vue'import App from './App.vue'//importing routerimport router from './router'const app = createApp(App)//Insantiate routerapp.use(router)app.mount('#app')

Init/Create Routes

In your router folder, find the index.js file. It should exist after installing the router with Vue 3 or standalone.

In this file you will create routes for your application to use in order to navigate to the pages, views, or components you want.

import { createRouter, createWebHistory } from 'vue-router'//Importing a viewimport HomeView from '../views/HomeView.vue'//Import a componentimport About from "@/components/About.vue"//Instantiate the routerconst router = createRouter({  history: createWebHistory(import.meta.env.BASE_URL),  //Create routes using this array of objects   routes: [    {        path: '/',        name: 'Hello',        component: HomeView    },    {        path: '/about',        name: 'aboutPage',        component: About    }]})export default router

In the router object, you will use the routes array to create your routes by adding a path, corresponding name, and the component/page you imported.

Display Pages

Now you will find the parent page of your application. In most cases, this will be the app.vue file. Add a RouterView to your template.

<template>    <main>        //Displays the routes according to your router/index.js        <RouterView> </RouterView>    </main></template>

You may want to use your url to help make your page dynamic depending on the user's needs. For example, let's say you have multople contributing writers to your website. You want to show the articles written only by a specific contributor.

const routes = [    {        path: "/author/:name",        component: AuthorPage    }]

This is the route path we establish in router/index.js

Now we need to create the component/page for this route. Since we are using the composition API, we no longer have access to the dynamic part of the url via this.$route. Because of this, we get access to this information with useRoute:

<template>    <main>        <h1> Author </h1>        {{ authorData }}    </main></template><script setup>    import { ref } from "vue";    //import useRoute from vue-router    import { useRoute } from "vue-router";    //Instantiate and get route information    const route = useRoute();    //Take information from route and get the name of author    const authorData = ref(route.params.name);</script>

The const route variable is a reactive object. For example, let's say our route is /author/Jack.

Author is the route for the page, and Jack is the dynamic name. Remember how we made the route /author/:name

The colon indicates that this is a dynamicId that we want access to in the page. The useRoute function gives us access to the name information. Try it for yourself and console.log(route.params).

Your console will show an object:

{    name: "Jack",    [[Prototype]]: Object}

And we use normal JavaScript to access this object by typing route.params.name

After getting the data from the URL, we added this information to a ref variable called authorData and displayed it to the template with mustache syntax.

Vue router is a comprehensive routing technology that requires it's own documentation. To learn more, visit the Vue Router Documentation