Vue Router根據(jù)后臺(tái)數(shù)據(jù)加載不同的組件實(shí)現(xiàn)
實(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)思路詳解
這篇文章主要給大家介紹了關(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)系,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
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)處理的方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-03-03
vue-cli webpack模板項(xiàng)目搭建及打包時(shí)路徑問(wèn)題的解決方法
這篇文章主要介紹了vue-cli webpack模板項(xiàng)目搭建以及打包時(shí)路徑問(wèn)題的解決方法,需要的朋友可以參考下2018-02-02
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),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11

