Struggling to come up with a suitable title for this Vue project dilemma. Here's what I'm facing:
Recently started using Router in my Vue project and feeling quite lost.
The setup in App.vue simply includes <RouterView>, which seems straightforward.
LoginView.vue serves as the entry point with a basic login popup to restrict unauthorized access, leading to HomeView.vue upon successful login.
Within HomeView.vue, I aim to showcase various content like an About page or Contact page.
Questions linger about the organization of components:
Should it be Views > LoginView.vue
Views > HomeView.vue > components > About.vue or Contact.vue
Or perhaps: Components > HomePage.vue > Views > AboutView.vue or ContactView.vue
Furthermore, I'm curious how to integrate either contact or about seamlessly into my home page without redundant content copying.
App.vue
<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
<template>
<body>
<div>
<RouterView />
</div>
</body>
</template>
Views > LoginPage.vue
<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>
<template>
<body>
<!--Login form markup goes here-->
</body>
</template>
Views > Homepage.vue
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
<Body class="h-screen bg-woodsmoke-950">
<!--Header and main content structure-->
</Body>
</template>
Index.ts
import { createRouter, createWebHistory } from 'vue-router'
import LoginView from '../views/LoginView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'login',
component: LoginView
},
{
path: '/home',
name: 'home',
component: () => import('../views/HomeView.vue')
},
{
path: '/about',
name: 'about',
component: () => import('../components/About.vue')
},
{
path: '/contact_me',
name: 'contactMe',
component: () => import('../components/ContactMe.vue')
}
]
})
export default router