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

Question

我搜索了很多Internet的部分（stackoverflow，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
                    }
                }
            ]
        }]}

因此，路径是：/，/ users和/ users / create。

我的观点是：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>

如您所见，在Layout SPA.vue中，我将主视图放在容器部分View中，这个：

• 当路径是/加载仪表板视图时。
• 当路径为/ usuarios时加载用户视图。

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

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

注意：我有一个替代解决方案，但我不喜欢它，因为我必须将admin.users.create路由作为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中，或将路径移至更高级别。