Open hatiche opened 1 year 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>
Uncaught TypeError: VueRouter is not a constructor at app.js:7:14 (anonymous) @ app.js:7
VueRouter is not working what should be done