Как повторно использовать именованное представление с вложенным вложенным маршрутом в Vue? - PullRequest
Новая
       53

Как повторно использовать именованное представление с вложенным вложенным маршрутом в Vue?

1 голос
/ 16 марта 2019

Я искал во многих частях Интернета (stackoverflow, документация vue, блоги и т. Д.), И я не нашел решение, которое мне нужно.Итак, проблема заключается в следующем:

rout.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 загрузить представление Users.

И здесь возникает проблема, когда путь равен / usuarios / crear , он либо не загружает представление UsersCreateEdit, либо сохраняет последнее (Users.vue).Однако маршрутизация работает, потому что я поставил проверку перенаправления для неизвестных URL-адресов, поскольку URL usuarios / crear не меняется, так что это работает, но не загружает представление.

Iуже работал таким образом с UI-Router в AngularJS, и не было никаких проблем, потому что он работает с наследованием состояний, но я хочу знать, существует ли какой-либо способ сделать то же самое в Vue ???

Примечание: у меня есть альтернативное решение, но оно мне не нравится, потому что я должен поставить маршрут admin.users.create как одноуровневое admin.users , и оно работаетно мне нужно, чтобы он был вложенным, потому что мне нужно получить подходящие маршруты для построения моей крошки, и я не хочу анализировать путь для ее построения.

path /usuarios/crear with incorrect view (Users)

1 Ответ

0 голосов
/ 16 марта 2019

Когда вы добавляете дочерний маршрут admin.users.create, это означает, что в родительском маршруте с именем admin.users компонент должен содержать собственный <router-view> с именем sectionView.

Вы можете найти это изображение в vue-router документации 

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

Компонент User содержит свой собственный <router-view>, где компоненты рендеринга Profile илиPosts

Итак, добавьте <router-view name="sectionView"></router-view> в компонент Users или переместите маршрут на более высокий уровень.

...