The Be Sure Blog

The easiest way would be to set a check mark during the Vue 3 project initialization. However, if you missed that, it is easy to implement the router later on:

$ npm install vue-router@4

Within the main.ts file, add:

import router from './router

And add ".use(router)" to this line:

createApp(App).use(store).use(router).use(VueSmoothScroll).mount('#app')

In the App.vue template block, you can add components that should be rendered on every page, plus you add "<router-view />", so it may look like this:

<template>
  <BackgroundDiv />
  <NavigationButton />
  <NavigationBar />
  
  <router-view />
</template>

Then, within your views folder, you create all your pages as .vue files. In my case there is an "ImpressumPage.vue" Nothing additional needs to be added to those pages, besides the HTML.

The navigation links have to look like this:

<router-link to="/impressum">Impressum</router-link>

And finally, you create a folder within /src named "router" and add an index.ts file with the following content:

import { createRouter, createWebHistory } from "vue-router";
import HomePage from "../views/HomePage.vue";
import ImpressumPage from "../views/ImpressumPage.vue";
const routes = [
    {
        path: "/",
        name: "Home",
        component: HomePage
    },
    {
        path: "/impressum",
        name: "Impressum",
        component: ImpressumPage
    }
];
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
});
export default router;

Now, restart the local development server and it should work! Watch the video tutorials of the provided resource for more info.

Update: For sure, in most cases you want to scroll to the top of the page, when navigation to a new one. Just add these lines to the router/index.ts file where the router is created with createRouter({}):

scrollBehavior() {
    return { top: 0 }
},