带有路由器的Vue。制作多个页面

问题描述 投票：0回答：1

老实说我不知道如何命名这个。但这里有详细信息。
我有一个带有 Router 的 Vue 项目。我对路由器很陌生。

App.vue 仅包含 我认为不需要更多解释。

第一页是 LoginView.vue - 弹出非常简单的登录窗口，以防止在进入网站之前进行访问。

登录后，进入HomeView.vue
在 HomeView.vue 中，我希望它显示一些内容。例如：关于页面、联系页面等

首先我组织得对吗？
视图 > LoginView.vue
视图 > HomeView.vue > 组件 > About.vue 或 Contact.vue。
或者应该是：
组件 > HomePage.vue > 视图 > AboutView.vue 或 ContactView.vue

其次，如何让以太坊联系人或即将出现在我的主页中，而无需将主页中的所有内容复制到我的“关于”或“联系人”选项卡。

应用程序.vue

<script setup lang="ts">
import { RouterView } from 'vue-router'

</script>

<template>
  <body>
    <div>
      <RouterView />
    </div>
  </body>
</template>

视图 > LoginView.vue

<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>

<template>
<body>
    <div class="flex justify-center items-center h-screen bg-woodsmoke-950">
        <div class="w-96 p-6 shadow-lg bg-white rounded-md">
            <h1 class="block text-3xl text-center font-arial font-bold">Welcome</h1>
            <div class="mt-1">
                <p class="text-woodsmoke-400 text-center">Login Here!</p>
            </div>
            <hr class="mt-3">
            <div class="mt-3">
                <lable for="username" class="block text-base mb-2">Username</lable>
                <input type="text" id="username" class="border w-full text-base px-2 py-1 focus:outline-none focus:ring-0 focus:border-gray-600" placeholder="Enter Username...">
            </div>
            <div class="mt-3">
                <lable for="password" class="block text-base mb-2">Password</lable>
                <input type="text" id="password" class="border w-full text-base px-2 py-1 focus:outline-none focus:ring-0 focus:border-gray-600" placeholder="Enter Password...">
            </div>
            <div class="mt-3 flex justify-between items-center">
                <div>
                    <input type="checkbox">
                    <label>Remember Me?</label>
                </div>
                <div>
                    <RouterLink to="/home" class="border-2 border-vred-700 bg-vred-50 text-vred-700 py-1 px-5 rounded-md hover:bg-vred-100 hover:text-vred-700 hover:border-vred-700">Login</RouterLink>
                </div>
            </div>
        </div>
    </div>
</body>
</template>

视图 > HomeView.vue

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <Body class="h-screen bg-woodsmoke-950">
    <header class="flex justify-between h-max bg-black">
      <RouterLink to="/home" class="flex justify-start items-center text-7xl text-vred-900 font-arial font-bold border-r-4 border-vred-950 my-1 ml-7 pr-3"
      >Title</RouterLink>

      <div class="flex justify-end items-center my-1 mr-7">
        <RouterLink to="/contactMe" class="text-md text-vred-400 font-arial font-bold bg-vred-950 rounded-xl p-1">Contact Me</RouterLink>
      </div>
      </header>

    <main>
      <RouterView></RouterView> <!-- This is where about will show up by default but would be replaced with contact me -->
    </main>
  </Body>
</template>

索引t.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
typescript vuejs3 tailwind-css vue-router
1个回答
0
投票

首先，文件组织由您决定。没有客观正确的方法来做到这一点。做对你来说最有意义的事情。

其次，将 

<router-view>
放在另一个 
<router-view>
中是设置嵌套路由的方式，这听起来就是你想要的。 Vue Router 文档很好地解释了嵌套路由，所以请先阅读它。

基本上，about 和 contactMe 路由需要放置在主路由的 

children
属性内。然后，根据父路径 + 子路径的组合，HomeView 组件中的 
<router-view>
将被替换为 About 组件或 contactMe 组件。要默认显示“关于”组件，您可以将其子路由路径保留为空。

routes: [
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/HomeView.vue')
    children: [
      {
        // path of /home will display 'home' component with 'about' nested by default
        path: '',
        name: 'about',
        component: () => import('../components/About.vue')
      },
      // path of /home/contact_me will display 'home' component with nested 'contactMe'
      {
        path: 'contact_me',
        name: 'contactMe',
        component: () => import('../components/ContactMe.vue')
      }
    ]
  }
]
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.