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

  1. 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 )
  2. 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 )
  3. 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 -->
<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: {
}, data() {
return { useNewShopKPI: false };
}, created() {
getStoreReportFormVersion().then((res) => {
if (get(res, '')) {
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 .

  1. If this page that loads data through the server is added later , There will be multiple ChooseXXX The middle page of .
  2. 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 -->
<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) => {
.then((responseData) => {
const useNewShopKPI = get(responseData, '');
const useOldShopKPI = get(
); if (useNewShopKPI) {
} else if (useOldShopKPI) {
} else {

Vue Router Load different components according to background data ( reflection -> Realization -> More than just realizing ) More articles about

  1. 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 ...

  2. Vue – Based on learning (5): Dynamically load and register components

    // var myComponent =() => import(`./../../components/custom_panel/${t_url}.vue`);// //var myCompo ...

  3. router Configure to load the corresponding components on demand , To configure active

    const routes = [ { path: '/', component: App, children: [ {path: '/index/:type', name: 'index', comp ...

  4. vue Data loading wait component

    About loading Component's . loading.vue <template> <div class="loading"> <div class=" ...

  5. Vue Implementation of an infinite load list

    Reference resources One place to judge is when scrolling is triggered again during loading , Don't get data . <!DOCTYPE html> < ...

  6. 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 , ...

  7. 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= ...

  8. [ 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 ...

  9. 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 ...

  10. 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

  1. 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 ...

  2. 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 ...

  3. 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 ...

  4. IOS Learning resource collection -- About animation code learning resources ( Great animation )

    Catalogue outline : 1. Great iOS Loading animation . github website : Mr. You's Translation blog:http://www.cnblogs ...

  5. springMVC The configuration file spring-servlet.xml in &lt;mvc:annotation-driven /&gt; The meaning of

    <mvc:annotation-driven/> label , The corresponding implementation class is org.springframework.web.servlet.config.AnnotationDrivenBeanD ...

  6. Fate measurement program c Code simple implementation

    #include<stdio.h>#include<stdlib.h>#include<math.h> #include <windows.h>// Back ...

  7. REST Web Server,REST Introduce

    Reference material : 1. 2. Backbone.js It's a heavyweight javascript  MVC Application framework , adopt Mod ...

  8. couldn&#39;t connect to server at src/mongo/shell/mongo.js:145

    When executed directly ./mongo There's a hint like this :couldn't connect to server at src/mongo/shell/mongo.js:145 solve : ...

  9. java Non blocking IO(NIO) technological process

    Single thread Multithreading (Netty/Mina)

  10. Truncate upload CTF

    subject : Upload bypass Introduce : 1, We open the link , It's an upload ...