Just diving into VueJS version 3 and vue-router. Despite my efforts to troubleshoot by consulting Stack Overflow and Google, the issue remains unresolved.
I have defined two routes:
- /login
- /admin/index
The Problem:
While the login route functions correctly, attempting to access the admin route leads to displaying the login form instead of the admin panel.
NOTE : I have placed
<router-view></router-view>components/layouts/MasterComponent.vueApp.vue, only the login component is imported.
Here is a snippet of the code:
routes:
import { createRouter, createWebHistory } from 'vue-router'
import LoginComponent from "../components/auth/LoginComponent";
import MasterComponent from "../components/layouts/MasterComponent";
// Remaining route definitions ...
export default router;
Master component code:
// Code for MasterComponent.vue file ...
export default {
name: "MasterComponent",
components: {
// Components imported here
},
};
App.vue code
// Code for App.vue file ...
export default {
name: 'App',
components: {
// Login Component
}
}
main.js code
import { createApp } from 'vue'
import App from './App.vue'
import routes from "./routes/route";
// Bootstrap and CSS imports ...
const app = createApp(App)
app.use(routes)
app.mount('#app')