文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将用户发送到不同的视图

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

Stack Overflow用户

提问于 2021-07-19 13:51:20

回答 1查看 58关注 0票数 0

我正在创建一个将用户发送到应用程序的不同视图的应用程序，因为我使用的是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')
      }
    ]
  },
];

我多次重复的组件只是一种实践。

vue.js

vue-router

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-19 19:29:33

您可以将“网格内容”移动到一个新组件(例如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。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68441669

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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