Uncaught TypeError: VueRouter is not a constructor-CodePudding

I have the following code in my app.js

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

const router = new VueRouter({
    routes
})

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

And this is how my index.html looks (I'm using Vue CDN):

<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
    
    <div id="app" >
        <h3 >
            Vue JS Front End
        </h3>
        <h5 >
            Employee Management Portal
        </h5>

        <nav >
            <ul >
                <li >
                    <router-link 
                    to="/home">Home</router-link>
                </li>
                <li >
                    <router-link 
                    to="/department">Department</router-link>
                </li>
                <li >
                    <router-link 
                    to="/employee">Employee</router-link>
                </li>
            </ul>
        </nav>
        <router-view></router-view>
    </div>

    <script src="variables.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/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="employee.js"></script>
    <script src="app.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>

I get the following error when opening index.html: "Uncaught TypeError: VueRouter is not a constructor"

I tried the solution provided by another post on SO, by adding the following to the top of my app.js file:

import VueRouter from 'vue-router';
Vue.use(VueRouter);

However, I then get the error "Uncaught SyntaxError: Cannot use import statement outside a module". Trying to fix this error seemed to get me in a rabbit hole. Is there a simple solution available for my original problem?

CodePudding user response：

Your code is completely valid for Vue 2 and Vue Router 3, but you are using Vue 3 and Vue Router 4, which have a different syntax:

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
})
const app = Vue.createApp({})
app.use(router)
app.mount('#app')

CodePudding user response：

"vue": "^3.2.16", "vue-router": "^4.0.12"

in app.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.mount('#app')

in router/index.js

import {createRouter} from 'vue-router';
import { routesConfig } from "./routesConfig";

const routes = [...routesConfig]
const router = createRouter ({routes})
export default router

in routesConfig.js

import { Home } from "../views/home/routeConfig.js";
export const routesConfig = [
  Home
]

in /views/home/routeConfig.js

export const Home = {
 path: "/home",
 name: "Home",
 component: () => import("./index.vue")
};

department and employee like home route config