如何在 Vue 中重用带有嵌套嵌套路由的命名视图？

Question

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

routes.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 个叶视图。

App.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 时 加载用户视图。

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

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

注意：我有一个替代解决方案，但我不喜欢它，因为我必须将 admin.users.create 路由作为 [=36= 的同级路由]admin.users 它有效，但我需要嵌套它，因为我需要检索匹配的路由来构建我的面包屑，我不想解析构建它的路径。

Answer 1

当您添加子路由 admin.users.create 时，这意味着在名称为 admin.users 的父路由中，组件必须包含自己的 <router-view> 名称为 sectionView.

您可以在 vue-router documentation

中找到该图片

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

组件 User 包含它自己的 <router-view>，其中渲染组件 Profile 或 Posts

因此，将 <router-view name="sectionView"></router-view> 添加到组件 Users 中，或者将路由移动到更高级别。

Answer 2

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

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

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
      }
    ]
}

如何在 Vue 中重用带有嵌套嵌套路由的命名视图？

How to reuse a named view with a nested nested route in Vue?

view

nested-routes

vue.js

vue-router