Приложение My Vue содержит два основных вида роутера: одно внутри модального окна, позволяющее загружать контент внутри указанного модального окна, а другое - внутри главной страницы. Я различаю их с помощью атрибута name. Вот фрагмент кода в файле routes.js, который, например, загружает контент в модальное окно.

export default ({
    mode: 'history',
    routes: [
        {
            path: '/classComp/create',
            components: {
                modalView: createClass
            }
        }
    ]
})

По сути, моя проблема заключается в том, что, когда я загружаю контент в маршрутизатор, контент в обзоре маршрутизатора для главной страницы исчезает. Я понимаю, что большинство людей используют атрибут children для решения этой проблемы, но в данном случае это невозможно. Например, пользователь может нажать кнопку роутера-ссылки на боковой панели, чтобы загрузить форму для создания классов в модальном окне. Таким образом, возможность нажатия этой кнопки не зависит от того, что загружено или не загружено на главную страницу, поэтому создание атрибута children невозможно.

Короче говоря, как я могу заставить vue-router загружать контент в модальный router-view, не стирая содержимое router-view основного блока?

** РЕДАКТИРОВАТЬ: ** Кто-то предложил использовать для этого keep-alive, но я не смог заставить это работать. Это жизнеспособное предложение, и если да, то как мне это сделать?

0
Lysander Cox 13 Фев 2021 в 06:40

1 ответ

Лучший ответ

Обдумывая еще раз свой вариант использования, я не думаю, что вложенные маршруты - это то, что нужно. Если вы действительно не хотите иметь маршрут, указывающий на ваш модальный объект, вы можете использовать что-то вроде portal-vue , чтобы переместить модальное окно в другое представление.

Если вы используете vue 3, он поставляется с компонентом, который выполняет нечто подобное: Телепорт

РЕДАКТИРОВАТЬ - продолжение нашего разговора из комментариев

Насколько я понимаю, портал позволяет вставлять HTML сразу в два разных места с одного маршрута; Моя проблема в том, что мне нужно одновременно загружать 2 маршрута.

Вы правы, портал не позволит вам это изменить. Проблема в том, что vue-router не имеет встроенной поддержки одновременной загрузки двух маршрутов (если только один не является дочерним по отношению к другому). Вот пара вещей, которые вы можете попробовать:

  • Добавьте modal вложенный маршрут (route.children). Это позволит вам использовать <router-view name="modal"> и не уходить от родительского представления. Я не думаю, что это имеет большой смысл. Вы можете сделать это программно, используя router.addRoutes
  • У вас есть два роутера и два приложения vue. Я не верю, что vue-router имеет встроенную поддержку одновременной загрузки двух маршрутов (если только один не является дочерним по отношению к другому). Однако у вас может быть отдельный экземпляр vue только для вашего модального кода. Однако это может вызвать сложности в зависимости от дизайна вашего приложения. Быстрый пример:
const appRouter = new VueRouter({ ... })
const modalRouter = new VueRouter({ mode: 'abstract', ... })
Vue.prototype.$modalRouter = modalRouter
const mainApp = new Vue({ router: appRouter })

mainApp.mount('#app')

....
App.vue
-------
<template>
  <div id="app">
    <router-view></router-view>
    <div id="modal-app" v-pre>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    const modalApp = new Vue({ router: this.$modalRouter })
    modalApp.mount('#modal-app')
  }
}
</script>

Вы можете вызвать this.$modalRouter.push в любом месте приложения, чтобы обновить маршрут для него.

Оба эти решения кажутся мне немного взломанными. Самый простой способ сделать это - вообще не использовать vue-router. С помощью portal-vue вы можете монтировать контент в модальное окно из любой точки приложения. Вы даже можете сделать это программно с помощью Wormhole.open ().

0
nVitius 13 Фев 2021 в 21:59