Requirements encountered in the actual project
The same link needs to load different page components . According to the different services purchased by users , There are different pages to show .
There are some bad implementations
- Write these components directly under the same component , adopt v-if To judge . If you do , You can not even use vue-router, Just put all the components , All in one file , All pass v-if Judge , It's also possible .（ The premise is that tens of thousands of lines of code together , If you don't mind the trouble ）
- When rendering this link , Directly request background data , Render different links through data .（ It's theoretically possible , But if the user doesn't use this function , These links get the background data in advance every time ; In addition, if the user knows the link , Direct access link , You still need logic to determine which page users should see ）
- By calling
router.beforeEach, Intercept each route , When the route is the route we specify , Request background data , Dynamic jump page .（ The function can be completed , But actually , This is just a small part of the whole system , Should not invade the entire routing system , If every business page , All written in the global routing system , It will also cause the logic of routing to be too complex ）
I think it's a better way to realize
Get the server data at the place where the route is configured and dynamically load the corresponding components
{
path: 'shopKPI',
// If you save the background data to store Inside , Visit here store data , It can be judged directly
// However, the data of this specific business page is placed globally store, Not anywhere else , There's really no need
component: () => import('@/views/store/dataVersion'),
name: 'store_KPI',
menuName: ' Shop staff ',
meta: {
codes: ['storeProduct.detail']
}
}
The ideal is very good , The reality is ,component The received method must synchronously return a promise.
Then I thought of the top Bad way to achieve 1, A little transformation
<!-- 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>
Render the route to the corresponding page , Instead, render the middle page ChooseShopKPI
{
path: 'shopKPI',
// If you get the background data to , Visit here store data , It can be judged directly
// However, the data of this specific business page is placed globally store, Not anywhere else , There's really no need
- component: () => import('@/views/store/dataVersion'),
+ component: () => import('@/views/store/ChooseShopKPI'),
name: 'store_KPI',
menuName: ' Shop staff ',
meta: {
codes: ['storeProduct.detail']
}
}
In this way, we achieve the desired function .
The function has been realized , But I started thinking again
Although this method solves the problem of dynamically loading page components . But there are also some small problems .
- If this page that loads data through the server is added later , There will be multiple
ChooseXXXThe middle page of . - This intermediate page , Actually did Secondary routing , Developers who are not familiar with logic may not know the page Jump logic , It increases the cost of understanding .
Final plan —— High order component
Through to ChooseXXX Abstraction , Transform into 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>
Get the background data directly in the routing configuration , And distribute the route . In this way, the routing logic is concentrated in the routing configuration file , No secondary routing . No headache and brain swelling in maintenance .
DynamicLoadComponent Components can also be reused , Subsequently, the routing configuration of the background data loading page is determined , Can lead to this intermediate component .
{
path: 'shopKPI',
component: () => import('@/views/store/components/DynamicLoadComponent'),
name: 'store_KPI',
menuName: ' Shop staff ',
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);
}),
})
}
Vue Router Load different components according to background data ( reflection -> Realization -> More than just realizing ) More articles about
- vue Realization tab Switch dynamic loading of different components
vue Realization tab Switch dynamic loading of different components Use vue Medium is Feature to load different components . See the following code for details : This function is for vue More complex pages can be used , You can split the functions of a page , Make the code simpler . How to use it ...
- Vue – Based on learning (5): Dynamically load and register components
// var myComponent =() => import(`./../../components/custom_panel/${t_url}.vue`);// //var myCompo ...
- router Configure to load the corresponding components on demand , To configure active
const routes = [ { path: '/', component: App, children: [ {path: '/index/:type', name: 'index', comp ...
- vue Data loading wait component
About loading Component's . loading.vue <template> <div class="loading"> <div class=" ...
- Vue Implementation of an infinite load list
Reference resources https://www.jianshu.com/p/0a3aebd63a14 One place to judge is when scrolling is triggered again during loading , Don't get data . <!DOCTYPE html> < ...
- Use vue And directive The design list loads more
background I wrote one before < pure JS There are three common built-in modules (VUE frame )>, Its logical thinking is relatively clear and easy to understand , Today, I saw part of the function code of the company's project , I found it more interesting to load more functions written by my colleagues , And it's easy to package into a component , ...
- Android Three level linkage selects cities ＋ The background service loads the database
Technical slag , Let's make do with it First we need one xml Data saved to database , Here I am from QQ Here's one loclist.xml file <CountryRegion Name=" China " Code= ...
- [ Reprint ] Talk again easyui datagrid Data loading for
This article only talks about jQuery easyui datagrid Data loading for , Because this is what everyone talks about most . Actually easyui datagrid There are only two ways to load data : One is ajax Load target url Back to json Count ...
- RE： Data loading is realized by sliding gesture at the mobile end
background : Based on the mobile terminal project to be tried, a function of loading different data through pull-up and slide gesture is required , It involves sliding gestures and ajax Knowledge points of data loading . So make a record of the whole implementation process . personal JS My skills are limited , see ...
- vue There are several ways to load on demand
Use vue-cli After building the project , We will be in Router Under the folder index.js It introduces related routing components , Such as : import Hello from '@/components/Hello' import ...
Random recommendation
- gnuplot: A more concise curve , Histogram drawing software
gnuplot: A more concise curve , Histogram drawing software gnuplot: A more concise curve , Histogram drawing software Zhong Xiewei Wed Jun 25 gnuplot Brief introduction About gnuplot Of ...
- iOS Of QuickTime Plugin
When UIWebView When playing video , You can see view hierarchy Are there in FigPluginView The figure of . This class comes from QuickTime Plugin,plugin The path of is : /Application ...
- python String segmentation
String segmentation , It can be used split,rsplit Method , Through the corresponding rules to cut into the generated list object info = 'name:haha,age:20$name:python,age:30$name:fef,age:5 ...
- IOS Learning resource collection -- About animation code learning resources （ Great animation ）
Catalogue outline : 1. Great iOS Loading animation . github website :https://github.com/NghiaTranUIT/FeSpinner Mr. You's Translation blog:http://www.cnblogs ...
- springMVC The configuration file spring-servlet.xml in <mvc:annotation-driven /> The meaning of
<mvc:annotation-driven/> label , The corresponding implementation class is org.springframework.web.servlet.config.AnnotationDrivenBeanD ...
- Fate measurement program c Code simple implementation
#include<stdio.h>#include<stdlib.h>#include<math.h> #include <windows.h>// Back ...
- REST Web Server,REST Introduce
Reference material : 1.http://www.chinalivedoor.com/story/1123.html 2. Backbone.js It's a heavyweight javascript MVC Application framework , adopt Mod ...
- couldn't connect to server 127.0.0.1:27017 at src/mongo/shell/mongo.js:145
When executed directly ./mongo There's a hint like this :couldn't connect to server 127.0.0.1:27017 at src/mongo/shell/mongo.js:145 solve : ...
- java Non blocking IO（NIO） technological process
Single thread Multithreading (Netty/Mina)
- Truncate upload CTF
subject : Upload bypass Introduce :http://teamxlc.sinaapp.com/web5/21232f297a57a5a743894a0e4a801fc3/index.html 1, We open the link , It's an upload ...