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

Я искал во многих частях Интернета (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
                    }
                }
            ]
        }]}

Итак, пути: /, / 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 не меняется, так что это работает, но не загружает представление.

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

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

путь / usuarios / crear с неправильным представлением (Пользователи)


view vue.js vue-router nested-routes
person Ivan Cabrera    schedule 16.03.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я столкнулся с той же проблемой и нашел решение в следующем сообщении в 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
      }
    ]
}
person Guillermo Verón    schedule 14.11.2019
comment
большое спасибо, я просмотрел эту статью в dev.to и в шаге 4: маршруты глубокого вложения, который я искал, и в дополнение к вашему последнему комментарию об избежании создания нового файла с помощью router-view также полезно для меня, так как я думаю, что это более практично. Спасибо, и я также надеюсь (в будущем), что Vue Router имеет модель наследования состояний в маршрутах, чтобы сделать это проще. - person Ivan Cabrera; 22.05.2020

arrow_upward
0
arrow_downward

Когда вы добавляете дочерний маршрут 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 или переместите маршрут на более высокий уровень.

person Alex    schedule 16.03.2019
comment
Вы упомянули другое альтернативное решение, о котором я подумал, но если я добавлю <router-view> в Users.vue, когда я нажму кнопку Agregar (Добавить пользователя), он появится под таблицей пользователей, и мне это не нравится. Я хотел визуализировать только представление UsersCreateEdit вместо представления Users, поэтому я предполагаю, что мне нужно поместить v-show="false" or v-if="false" в представление Users (чтобы скрыть таблицу пользователей), когда я нажимаю кнопку Agregar :(. В любом случае спасибо. - person Ivan Cabrera; 16.03.2019