VueRouter is not working, how to solve this? VueRouter is not a constructor

Question

I am new to Vue with some nodejs backend experiance. I'm having problem and keep getting an error:

"Uncaught TypeError: VueRouter is not a constructor". This is my cod(app.js):

const routes=[
{ path:'/home', component: home },
{ path:'/zaposlenik', component: zaposlenik },
{path:'/department', component: department }
]



const route = new VueRouter({
routes
})

const app= new Vue({
router
}).$mount('#app')

My department.js looks like:

const department={template: '<h1>Ovo je odsjek</h1>'}

And of course, I have this:

<nav class="navbar navbar-expand-sm bg-light navbar-dark">
        <ul class="navbar-nav">
            <li class="nav-item m-1">
                <router-link class="btn btn-light btn-outline-primary" to="/home">Home</router-link>
            </li>

            <li class="nav-item m-1">
                <router-link class="btn btn-light btn-outline-primary" to="/department">Odjel</router-link>
            </li>

            <li class="nav-item m-1">
                <router-link class="btn btn-light btn-outline-primary" to="/zaposlenik">Zaposlenik</router-link>
            </li>
        </ul>


    </nav>

    <router-view></router-view>

</div>

<script src="variables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js"></script>

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<script src="home.js"></script>
<script src="department.js"></script>
<script src="zaposlenik.js"></script>
<script src="app.js"></script>

Can you help me, please?

Thank you in advance,

Vinko

Answer 1

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

const routes=[
{ path:'/home', component: home },
{ path:'/zaposlenik', component: zaposlenik },
{path:'/department', component: department }
]

const router = VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
   routes
})

createApp({}).use(router).mount('#app')

There you go! From the documentation : Getting started