时间戳

首页 > 解决方案 > 如何在 Vue 中重用具有嵌套嵌套路由的命名视图？

vue.js - 如何在 Vue 中重用具有嵌套嵌套路由的命名视图？

问题描述

我搜索了 Internet 的很多部分（stackoverflow、vue 文档、博客等），但没有找到我需要的解决方案。所以，问题如下：

路由.js

 {
    path:'/',
    components:{
        allPageView:LytSPA
    },
    meta:{
        requiresAuth:true
    },
    children:[
        {
            path:'',
            name:'admin',
            components:{
                sectionView:AdminDashboard
            }
        },
        {
            name:'admin.users',
            path:'usuarios',
            components:{
                sectionView:Users
            },
            children:[
                {
                    name:'admin.users.create',
                    path:'crear', 
                    components:{
                        sectionView:UsersCreateEdit
                    }
                }
            ]
        }]}

因此，路径是：/、/usuarios 和 /usuarios/crear。

我的视图是：App.vue（带有命名视图）、LytSPA.vue（带有命名视图）、AdminDashboard.vue、Users.vue、UsersCreateEdit。所以，我有 2 个节点视图和 3 个叶子视图。

应用程序.vue

<template>
<router-view name="allPageView"></router-view></template>

LytSPA.vue

<template>
<div>
    <header>
        <header-view></header-view>
    </header>
    <transition name="slide-left-aside">
        <aside v-show="!collapsed">
            <aside-view @collapse="collapseAside"></aside-view>
        </aside>
    </transition>
    <transition name="slide-expand-button">
        <b-button @click="collapseAside(false)" id="btnExpand" v-show="collapsed">
            <font-awesome-icon icon="chevron-right"/>
        </b-button>
    </transition>
    <section id="sectionSPA" :class="{collapsed: collapsed}">
        <breadcrumb-view></breadcrumb-view>
        <router-view name="sectionView" key="$route.fullPath"></router-view>
    </section>
</div></template>

如您所见，在LayoutSPA.vue中，我将主视图放在了容器sectionView中，因此：

问题来了，当路径是/usuarios/crear时，它要么不加载 UsersCreateEdit 视图，要么保留最后一个（Users.vue）。但是，路由正在工作，因为我对未知 URL 进行了重定向验证，因为 url usuarios/crear 没有改变，所以它可以工作，但不会加载视图。

我已经在 AngularJS 中使用 UI-Router 以这种方式工作，并且没有任何问题，因为它适用于状态继承，但我想知道在 Vue 中是否存在任何方式来做同样的事情？？？

注意：我有一个替代解决方案，但我不喜欢它，因为我必须将admin.users.create路由作为admin.users的兄弟，它可以工作，但我需要它是嵌套的，因为我需要检索匹配的路线来构建我的面包屑，我不想解析构建它的路径。

路径 /usuarios/crear 的视图不正确（用户）

标签： vue.jsviewvue-routernested-routes

解决方案

我遇到了同样的问题，我在dev.to的以下帖子中找到了解决方案。

如果要在单独的视图中显示列表组件和表单组件。您可以创建一个包含列表和表单的根组件：

User.vue（包装）

<template>
    <router-view></router-view>
</template>

而且您的 routes.js 文件中必须有类似的内容

//...omitted for brevity
const routes = [
{
    path: "/users",
    component: User,
    children: [
      { path: "/", component: ListUsers, name: "user-list" },
      { path: "new", component: FormUsers, name: "user-form" }
    ]
  }
];
//...omitted for brevity

如果不想为根组件创建新文件，可以使用以下render方法：

{
    path: "/users",
    component: {
     render(c) { // render the wrapper component
        return c("router-view");
      }
    },
    children: [
      {
        path: "",
        component: ListUsers
      },
      {
        path: "new",
        component: FormUsers
      }
    ]
}

推荐阅读