如何将用户发送到不同的视图

Question

我正在创建一个应用程序，它将向用户发送应用程序的不同视图，因为我使用的是 Vue 3 和 Vue 路由器，但是我在尝试显示不同的页面时遇到了问题，但这并没有这样做，据我所知，因为能够显示页面是必要的，但是如果我使用它，视图将显示在我的组件下方，一种选择是创建一个条件来显示视图或组件，但是做这似乎是一种非常肮脏的方式。做的事情。
这是我的观点：

<template>
  <h2>Proyectos</h2>

  <div class="actions">
    <router-link to="/proyectos/crear" class="action__add">
      <i class="material-icons-outlined">
        add
      </i>
      Crear Proyecto
    </router-link>
    <input type="text" class="action__search" placeholder="Buscar..." />
  </div>

  <div class="grid-content">
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
    <list-project />
  </div>
  <router-view />
</template>

<script>
import ListProject from '../../components/project/ListProject.vue';
export default {
  components: { ListProject },
};
</script>

这是我的路由器：

const routes = [
  {
    path: '/proyectos',
    name: 'Project',
    component: () => import('../views/project/AppContent.vue'),
    children : [
      {
        path: 'crear',
        component: () => import('../views/project/AppCreate.vue')
      }
    ]
  },
];

重复多次的部分只是练习

Answer 1

您可以将“grid-content”移动到新组件（例如GridContent.vue）并使用默认子路由加载它。

const routes = [
  {
    path: '/proyectos',
    name: 'Project',
    component: () => import('../views/project/AppContent.vue'),
    children : [
      { 
        path: '', 
        component: () => import('../views/project/GridContent.vue')
      },
      {
        path: 'crear',
        component: () => import('../views/project/AppCreate.vue')
      }
    ]
  },
];

你可以看看https://router.vuejs.org/guide/essentials/nested-routes.html#nested-routes

移动组件后的示例代码：

<template>
  <h2>Proyectos</h2>

  <div class="actions">
    <router-link to="/proyectos/crear" class="action__add">
      <i class="material-icons-outlined">
        add
      </i>
      Crear Proyecto
    </router-link>
    <input type="text" class="action__search" placeholder="Buscar..." />
  </div>

  <router-view />
</template>

<script>
import ListProject from '../../components/project/ListProject.vue';
export default {
  components: { ListProject },
};
</script>

现在 <router-view /> 将在着陆时渲染 GridContent.vue 并在路线更改为“/proyectos/crear”

时渲染 AppCreate.vue

如何将用户发送到不同的视图

How to send the user to different views

vue.js

vue-router