ArtOfEngineer / PythonDjango-PostgreSQL-VueJS

10 stars 14 forks source link

TypeError #1

Open hatiche opened 1 year ago

hatiche commented 1 year ago

2023-02-20 (2) 2023-02-20 (3) Uncaught TypeError: VueRouter is not a constructor at app.js:7:14 (anonymous) @ app.js:7 2023-02-20

VueRouter is not working what should be done

necklinux commented 5 months ago

I fix this issue follow below instruction: https://stackoverflow.com/questions/71246867/uncaught-reference-error-vuerouter-is-not-defined

my files look like this:

app.js


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

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

const app=Vue.createApp({})

app.use(router)

app.mount('#app')

index.html


<!DOCTYPE html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>

    <div id="app" class="container">
        <h3 class = "d-flex justify-content-center">
            Vue JS Front End
        </h3>

        <h5 class = "d-flex justify-content-center">
            Employee Management Portal
        </h5>

        <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">Department</router-link>
                </li>
                <li class="nav-item m-1">
                    <router-link class="btn btn-light btn-outline-primary"
                    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.7.2/axios.min.js"></script>

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>

    <script src="home.js"></script>
    <script src="department.js"></script>
    <script src="employee.js"></script>
    <script type="text/javascript" src="app.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>
</html>