最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue Router根據(jù)后臺(tái)數(shù)據(jù)加載不同的組件實(shí)現(xiàn)

 更新時(shí)間:2021年08月09日 08:50:07   作者:zhea55  
本文主要介紹了根據(jù)用戶所購(gòu)買服務(wù)的不同,有不同的頁(yè)面展現(xiàn)。文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

實(shí)際項(xiàng)目中遇到的需求

同一個(gè)鏈接需要加載不同的頁(yè)面組件。根據(jù)用戶所購(gòu)買服務(wù)的不同,有不同的頁(yè)面展現(xiàn)。

有一些不好的實(shí)現(xiàn)方式

  • 直接把這幾個(gè)組件寫(xiě)在同一個(gè)組件下,通過(guò)v-if去判斷。如果這么做的話,甚至可以不使用vue-router,直接把所有組件,都寫(xiě)在一個(gè)文件里面,全部通過(guò)v-if判斷,也是可行的。(前提是幾萬(wàn)行代碼一起,你不嫌麻煩的話)
  • 在渲染這個(gè)鏈接的時(shí)候,直接去請(qǐng)求后臺(tái)的數(shù)據(jù),通過(guò)數(shù)據(jù)渲染不同的鏈接。(理論上是可行的,但如果用戶沒(méi)有用這個(gè)功能,這些鏈接每次都提前取了后臺(tái)數(shù)據(jù);另外如果用戶知道了鏈接,直接訪問(wèn)鏈接,還是需要邏輯去判斷用戶該看到哪個(gè)頁(yè)面)
  • 通過(guò)調(diào)用router.beforeEach,對(duì)每個(gè)路由進(jìn)行攔截,當(dāng)路由為我們指定的路由時(shí),請(qǐng)求后臺(tái)數(shù)據(jù),動(dòng)態(tài)跳轉(zhuǎn)頁(yè)面。(功能是可以完成,但實(shí)際上,這只是整個(gè)系統(tǒng)的一小塊功能,不應(yīng)該侵入整個(gè)路由系統(tǒng),如果每個(gè)業(yè)務(wù)頁(yè)面,都寫(xiě)在全局路由系統(tǒng),也會(huì)導(dǎo)致路由的邏輯過(guò)于復(fù)雜)

個(gè)人感覺(jué)比較好的實(shí)現(xiàn)方式

在配置路由的地方獲取服務(wù)器數(shù)據(jù)動(dòng)態(tài)加載對(duì)應(yīng)的組件

{
  path: 'shopKPI',
  // 如果提前把后臺(tái)數(shù)據(jù)存到store里面,在這里訪問(wèn)store數(shù)據(jù),可以直接判斷出來(lái)
  // 但這種特定業(yè)務(wù)頁(yè)面的數(shù)據(jù)放全局store,其他地方也不用,實(shí)在沒(méi)有必要
  component: () => import('@/views/store/dataVersion'),
  name: 'store_KPI',
  menuName: '店鋪參謀',
  meta: {
    codes: ['storeProduct.detail']
  }
}

理想很美好,現(xiàn)實(shí)的情況是,component接收的這個(gè)方法必須要同步的返回一個(gè)promise。

這時(shí)候我想到了上面不好的實(shí)現(xiàn)方式1,稍微加以改造

<!-- ChooseShopKPI.vue -->
<template>
  <dataVersion v-if="!useNewShopKPI" />
  <ShopKPI v-else />
</template>

<script>
import { get } from 'lodash';
import { getStoreReportFormVersion } from '@/api/store';
import dataVersion from './dataVersion';
import ShopKPI from './ShopKPI';

export default {
  name: 'ChooseShopKPI',

  components: {
    dataVersion,
    ShopKPI,
  },

  data() {
    return { useNewShopKPI: false };
  },

  created() {
    getStoreReportFormVersion().then((res) => {
      if (get(res, 'data.data.new')) {
        this.useNewShopKPI = true;
      }
    });
  },
};
</script>

<style lang="css" scoped></style>

把路由渲染對(duì)應(yīng)的頁(yè)面,改為渲染這個(gè)中間頁(yè)面ChooseShopKPI

{
  path: 'shopKPI',
  // 如果提前把后臺(tái)數(shù)據(jù)取到,在這里訪問(wèn)store數(shù)據(jù),可以直接判斷出來(lái)
  // 但這種特定業(yè)務(wù)頁(yè)面的數(shù)據(jù)放全局store,其他地方也不用,實(shí)在沒(méi)有必要
-  component: () => import('@/views/store/dataVersion'),
+  component: () => import('@/views/store/ChooseShopKPI'),
  name: 'store_KPI',
  menuName: '店鋪參謀',
  meta: {
    codes: ['storeProduct.detail']
  }
}

這樣就實(shí)現(xiàn)了我們期望的功能。

功能已實(shí)現(xiàn),但我又開(kāi)始了新的思考

這種方式雖然很好的解決了動(dòng)態(tài)加載頁(yè)面組件的問(wèn)題。但也產(chǎn)生了一些小問(wèn)題。

  • 如果這種通過(guò)服務(wù)器加載數(shù)據(jù)的頁(yè)面后續(xù)增加的話,會(huì)出現(xiàn)多個(gè)ChooseXXX的中間頁(yè)面。
  • 這種中間頁(yè)面,實(shí)際上是做了二次路由,不熟悉邏輯的開(kāi)發(fā)人員可能并不清楚這里面的頁(yè)面跳轉(zhuǎn)邏輯,增加了理解成本。

最終方案——高階組件

通過(guò)對(duì)ChooseXXX進(jìn)行抽象,改造為DynamicLoadComponent

<!-- DynamicLoadComponent.vue -->
<template>
  <component :is="comp"  />
</template>

<script>
export default {
  name: 'DynamicLoadComponent',
  props: {
    renderComponent: {
      type: Promise,
    },
  },
  data() {
    return {
      comp: () => this.renderComponent
    }
  },
  mounted() {},
};
</script>

<style lang="css" scoped></style>

直接在路由的配置中獲取后臺(tái)數(shù)據(jù),并進(jìn)行路由的分發(fā)。這樣路由邏輯都集中在路由配置文件中,沒(méi)有二次路由。維護(hù)起來(lái)不會(huì)頭疼腦脹。

DynamicLoadComponent組件也得以復(fù)用,后續(xù)新增判斷后臺(tái)數(shù)據(jù)加載頁(yè)面的路由配置,都可以導(dǎo)向這個(gè)中間組件。

{
  path: 'shopKPI',
  component: () => import('@/views/store/components/DynamicLoadComponent'),
  name: 'store_KPI',
  menuName: '店鋪參謀',
  meta: {
    codes: ['storeProduct:detail'],
  },
  props: (route) => ({
    renderComponent: new Promise((resolve, reject) => {
      getStoreReportFormVersion()
        .then((responseData) => {
          const useNewShopKPI = get(responseData, 'data.data.shop_do');
          const useOldShopKPI = get(
            responseData,
            'data.data.store_data_show'
          );

          if (useNewShopKPI) {
            resolve(import('@/views/store/ShopKPI'));
          } else if (useOldShopKPI) {
            resolve(import('@/views/store/dataVersion'));
          } else {
            resolve(import('@/views/store/ShopKPI/NoKPIService'));
          }
        })
        .catch(reject);
    }),
  })
}

查看在線小例子(只支持chrome)
https://stackblitz.com/edit/vuejs-starter-jsefwq?file=index.js

到此這篇關(guān)于Vue Router根據(jù)后臺(tái)數(shù)據(jù)加載不同的組件實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue Router后臺(tái)數(shù)據(jù)加載不同的組件 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路詳解

    vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路詳解

    這篇文章主要給大家介紹了關(guān)于vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2023-02-02
  • 談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系

    談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系

    本篇文章主要介紹了談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系,具有一定的參考價(jià)值,有興趣的可以了解一下
    2017-08-08
  • uni-app自定義組件詳細(xì)代碼示例

    uni-app自定義組件詳細(xì)代碼示例

    組件是vue技術(shù)中非常重要的部分,組件使得與ui相關(guān)的輪子可以方便的制造和共享,進(jìn)而使得vue使用者的開(kāi)發(fā)效率大幅提升,這篇文章主要給大家介紹了關(guān)于uni-app自定義組件的相關(guān)資料,需要的朋友可以參考下
    2024-02-02
  • vue3中使用Apache?ECharts的詳細(xì)方法

    vue3中使用Apache?ECharts的詳細(xì)方法

    最近在做一些數(shù)據(jù)透析的項(xiàng)目需要用到報(bào)表圖,那么報(bào)表圖好用的有老牌的ECharts,比較新意的AntV,思前馬后的想了一下還是用了Echarts,這篇文章主要介紹了vue3中使用Apache?ECharts,需要的朋友可以參考下
    2022-11-11
  • fullcalendar日程管理插件月份切換回調(diào)處理方案

    fullcalendar日程管理插件月份切換回調(diào)處理方案

    這篇文章主要為大家介紹了fullcalendar日程管理插件月份切換回調(diào)處理的方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-03-03
  • vue?vue-esign簽字板的demo

    vue?vue-esign簽字板的demo

    這篇文章主要介紹了vue?vue-esign簽字板的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue-cli webpack模板項(xiàng)目搭建及打包時(shí)路徑問(wèn)題的解決方法

    vue-cli webpack模板項(xiàng)目搭建及打包時(shí)路徑問(wèn)題的解決方法

    這篇文章主要介紹了vue-cli webpack模板項(xiàng)目搭建以及打包時(shí)路徑問(wèn)題的解決方法,需要的朋友可以參考下
    2018-02-02
  • vue 解決IOS10低版本白屏的問(wèn)題

    vue 解決IOS10低版本白屏的問(wèn)題

    這篇文章主要介紹了vue 解決IOS10低版本白屏的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答

    web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答

    這篇文章主要介紹了web面試中常問(wèn)問(wèn)題,MVC與MVVM區(qū)別以及Vue為什么不完全遵守MVVM的難點(diǎn)解答,有需要的朋友可以借鑒參考下,希望能夠有所幫助
    2021-09-09
  • Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn)

    Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn)

    這篇文章主要介紹了Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11

最新評(píng)論

醴陵市| 通州区| 临安市| 南木林县| 尚志市| 海口市| 垫江县| 吴旗县| 庆安县| 晋江市| 建德市| 尚志市| 柏乡县| 日喀则市| 永靖县| 渝中区| 正阳县| 怀来县| 会理县| 松江区| 玉门市| 乃东县| 泰安市| 武川县| 永宁县| 正定县| 措勤县| 永顺县| 调兵山市| 黑河市| 瓮安县| 衢州市| 福贡县| 锡林郭勒盟| 盐亭县| 临漳县| 龙泉市| 雷州市| 威信县| 措勤县| 黔东|