Vue - передать компоненты в router-view для динамически загружаемого компонента - PullRequest
Новая
       8

Vue - передать компоненты в router-view для динамически загружаемого компонента

0 голосов
/ 17 июня 2020

Мне нужно отобразить другой макет для одного и того же маршрута для указанного c URI с разными компонентами в зависимости от того, находится ли пользователь на мобильном или настольном компьютере.

Я бы хотел избежать проверки пути маршрута в PageCommon (компоненте макета), чтобы он оставался чистым.

В приложении есть главный компонент, заботящийся о макете, у него другой маршрутизатор- представления, в которых мы загружаем различные компоненты для каждого URI страницы. Это был бы нормальный путь для этого. 

{
    path: '',
    component: PageCommon,
    children: [
      {
        path: '',
        name: 'Home',
        components: {
          default: Home,
          header: Header,
          'main-menu': MainMenu,
          'page-content': PageContent,
          footer: Footer,
          'content-footer': ContentFooter
        }
      },

Я не могу изменить свойство компонентов маршрута после загрузки компонента, поэтому я попытался создать оболочку и передать компоненты динамически. 

 {
    path: 'my-view',
    name: 'My_View',
    component: () => import('@/components/MyView/ViewWrapper')
  },

In / components / MyView / ViewWrapper '

    <page-common v-if="isMobile">
        <my-mobile-view is="default"></my-mobile-view>
        <main-menu is="main-menu"></main-menu>     
    </page-common>    
    <page-common v-else>
        <my-desktop-view is="default"></my-desktop-view>
        <header is="header"></header>    
        <main-menu is="main-menu"></main-menu>    
        <footer is="footer"></footer> 
    </page-common>    

</template>

Я ожидал бы, что компоненты, переданные внутри общего блока страницы, будут заменены на соответствующие, но это не так работает, а Vue просто загружает компонент, общий для страницы, с пустыми представлениями маршрутизатора.

Есть ли для этого подход?

Обратите внимание, что я уже пробовал использовать свойство: is для загрузки различных компонентов, но тогда проблема заключается в том, как указать родителю использовать тот или иной компонент для этой страницы. Вот код для этого: 

<template>
    <component :is="myView"></component>    
</template>
<script>
import DesktopView from "@/components/MyView/DesktopView";
import MobileView from "@/components/MyView/MobileView";
export default {
    name: 'MyView', 
    components: {
        DesktopView,
        MobileView,
    },
    data(){
        return {
            myView: null,
            isMobile: this.detectMobile()
        }
    },
    methods : {
        getViewComponent() {
            return this.isMobile ? 'mobile-view' : 'desktop-view';
        }
    },
    created() {
        this.myView = this.getViewComponent();
    }
}
</script>

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

1 Ответ

1 голос
/ 18 июня 2020

Метод вычисленный - это все, что вам нужно.

У вас должен быть этот логарифм верхнего уровня c в App.vue, и <router-view> должен быть помещен в оба DesktopView и MobileView. 

// App.vue

<template>

    <component :is="myView"></component>   

</template>

<script>

import DesktopView from "@/components/MyView/DesktopView";
import MobileView from "@/components/MyView/MobileView";

export default {

    name: 'MyView', 

    components: {
        DesktopView,
        MobileView,
    },

    computed: {

      myView() {

        return this.detectMobile() ? 'mobile-view' : 'desktop-view';

      }

   }

}
</script>

Вы также можете рассмотреть возможность разделения кода, установив Dynami c Components для этих макетов, поскольку Mobile будет загружать Desktop View, потому что он скомпилирован в В окончательной сборке зарегистрируйте их глобально как динамический c импорт, вместо этого, если импортируете их в MyView, а затем удалите components, а также после выполнения следующих действий, таким образом будет загружен только тот, который нужен, что сэкономит мобильным пользователям их пропускную способность: 

// main.js

import LoadingDesktopComponent from '@/components/LoadingDesktopComponent '

Vue.componenet('desktop-view', () => ({
  component: import('@/components/MyView/DesktopView'),
  loading: LoadingDesktopComponent // Displayed while loading the Desktop View
})


// LoadingDesktopComponent .vue

<template>

  <div>
    Optimizing for Desktop, Please wait.
  </div>

</template>

<script>

export default {

  name: 'loading-component'

}

</script>

Логи маршрутизации c будет обрабатываться только тогда, когда доступен <router-view>, это означает, что вы можете отложить представление Vue Router, например, вы можете указать :is show экран spla sh как экран загрузки на любом URI перед отображением компонента в :is, который содержит <router-view>, только тогда URI будет обработан для отображения релевантности Содержимое nt.

...