Vue - 在動態加載的組件上將組件傳遞給路由器視圖

Question

我需要為具有不同組件的特定 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')
  },

在 /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>

我希望在 page-common 塊中傳遞的組件將被適當地替換，但這不是它的工作方式，並且 Vue 只是加載帶有空路由器視圖的 page-common 組件。

有什么辦法嗎？

請注意，我已經嘗試使用：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路由器視圖使用這種方法，為每個執行上述操作的組件創建一個組件，但它看起來是一個非常糟糕的解決方案。

Answer 1

您只需要一個計算方法。

您應該在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>

您可能還需要考慮通過為這些布局設置動態組件來進行代碼拆分，因為 Mobile 將加載桌面視圖，因為它已編譯到最終構建中，將它們全局注冊為動態導入，而不是在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>

只有當<router-view>可用時才會處理路由邏輯，這意味着您可以延遲 Vue Router 的呈現，例如，您可以在顯示組件之前在任何 URI :is顯示一個像加載屏幕一樣的啟動屏幕:is包含<router-view> ，只有到那時才會處理 URI 以顯示相關內容。