[Vuejs]-Vue js Routers how to open a page when following a specific link

You should specify a path inside your routes.
Steps

1. Your main app.vue should look like this

    <div>
        <navbar />
        <router-view />
        <footer />
    </div>
</template>

2. make a folder router and inside an index.js (or more structured files)
   It must look like this

import Vue from 'vue'
import Router from 'vue-router'
import HomeRoute from '@/components/routes/HomeRoute'
import AboutRoute from '@/components/routes/AboutRoute'

Vue.use(Router)
const router = new Router({
    routes: [
        {
            path: '/home',
            name: 'HomeRoute',
            alias: '*',
            component: HomeRoute
        },
        {
            path: '/about',
            name: 'About',
            component: AboutRoute
        }
    ]
})

export default router 

The first path is the '/home' with alias *.
if you type '/home' in the url you will go to the main page.
Also the alias: '*' means that everything you type after will redirect you to this route, unless it finds another route registered

You are missing some code from main.js.

I cannot see Vue getting initalized anywhere.

You should import router in your main.js and use .use(router) in there

App.vue

<template>
  <router-view />
</template>

/router/index.js

import Router from 'vue-router'
import HomeRoute from '@/components/routes/HomeRoute.vue'

const router = new Router({
  routes: [
    {
      path: '/home',
      component: HomeRoute
    }
  ]
})

export default router

main.js

import Vue from 'vue'
import App from "./App.vue";
import router from '@/router'
const app = Vue.createApp(App)
app.use(router)
app.mount('#app')

You can check your HomePage component. Does it has slot that you put router-view there? What if you use simple router-view without HomePage? Did you register router in your main app.js?

And if I correctly understand you, you can do something like this to manage your routes in index.js

const router = new Router({
        routes: [
            {
            path: '/',
            beforeEnter: (from, to, next) => next({path: '/home'})
        },
        {
            path: '/home',
            name: 'HomeRoute',
            component: HomeRoute
        }
    ]
})

Read about VueRouter hooks https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

Also you can use children:

import HomeLayout from '@/layouts/HomeLayout.vue'
import HomePage from '@/views/HomePage.vue'
import HomeAbout from '@/views/HomePage.vue'

const router = new Router({
routes: [
    {
        path: '/',
        beforeEnter: (from, to, next) => next({path: '/home'})
    },
    {
        path: '/home',
        component: HomeLayout,
        children: [
            // full url will be like: localhost:8080/home
            {
                path: '',
                name: 'Home',
                component: HomePage
            },
            // full url will be like: localhost:8080/home/about
            {
                path: 'about',
                name: 'HomeAbout',
                component: HomeAbout
            }
        ]
    }
]

})