目錄實際項目中遇到的需求有一些不好的實現(xiàn)方式個人感覺比較好的實現(xiàn)方式功能已實現(xiàn)，但我又開始了新的思考最終方案——高階組件實際項目中遇到的需求

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

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

在配置路由的地方獲取服務器數(shù)據(jù)動態(tài)加載對應的組件

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

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

這時候我想到了上面不好的實現(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>

把路由渲染對應的頁面，改為渲染這個中間頁面ChooseShopKPI

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

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

功能已實現(xiàn)，但我又開始了新的思考

這種方式雖然很好的解決了動態(tài)加載頁面組件的問題。但也產生了一些小問題。

如果這種通過服務器加載數(shù)據(jù)的頁面后續(xù)增加的話，會出現(xiàn)多個ChooseXXX的中間頁面。 這種中間頁面，實際上是做了二次路由，不熟悉邏輯的開發(fā)人員可能并不清楚這里面的頁面跳轉邏輯，增加了理解成本。最終方案——高階組件

通過對ChooseXXX進行抽象，改造為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>

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

DynamicLoadComponent組件也得以復用，后續(xù)新增判斷后臺數(shù)據(jù)加載頁面的路由配置，都可以導向這個中間組件。

{ 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

到此這篇關于Vue Router根據(jù)后臺數(shù)據(jù)加載不同的組件實現(xiàn)的文章就介紹到這了,更多相關Vue Router后臺數(shù)據(jù)加載不同的組件 內容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！