From: leemove <hg_limu@163.com>
Date: Sat, 9 Jan 2021 10:10:27 +0000 (+0800)
Subject: feat(warn): warn defineAsyncComponent usage in routes (#682)
X-Git-Tag: v4.0.3~3
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9520d66112c0f2922f4284cda1e75b316ddf3488;p=thirdparty%2Fvuejs%2Frouter.git

feat(warn): warn defineAsyncComponent usage in routes (#682)
---

diff --git a/__tests__/warnings.spec.ts b/__tests__/warnings.spec.ts
index 5273b0fb..41e8eda8 100644
--- a/__tests__/warnings.spec.ts
+++ b/__tests__/warnings.spec.ts
@@ -1,6 +1,11 @@
 import { mockWarn } from 'jest-mock-warn'
 import { createMemoryHistory, createRouter } from '../src'
-import { defineComponent, FunctionalComponent, h } from 'vue'
+import {
+  defineAsyncComponent,
+  defineComponent,
+  FunctionalComponent,
+  h,
+} from 'vue'
 
 let component = defineComponent({})
 
@@ -177,6 +182,23 @@ describe('warnings', () => {
     expect('"/foo" is a Promise instead of a function').toHaveBeenWarned()
   })
 
+  it('warns if use defineAsyncComponent in routes', async () => {
+    const router = createRouter({
+      history: createMemoryHistory(),
+      // simulates import('./component.vue')
+      routes: [
+        {
+          path: '/foo',
+          component: defineAsyncComponent(() => Promise.resolve({})),
+        },
+      ],
+    })
+    await router.push('/foo')
+    expect(
+      `Component "default" in record with path "/foo" is defined using "defineAsyncComponent()". Write "() => import('./MyPage.vue')" instead of "defineAsyncComponent(() => import('./MyPage.vue'))"`
+    ).toHaveBeenWarned()
+  })
+
   it('warns if no route matched', async () => {
     const router = createRouter({
       history: createMemoryHistory(),
diff --git a/src/navigationGuards.ts b/src/navigationGuards.ts
index 3f665c30..805b3dac 100644
--- a/src/navigationGuards.ts
+++ b/src/navigationGuards.ts
@@ -261,6 +261,16 @@ export function extractComponentsGuards(
           )
           let promise = rawComponent
           rawComponent = () => promise
+        } else if (
+          (rawComponent as any).__asyncLoader &&
+          guardType === 'beforeRouteEnter'
+        ) {
+          warn(
+            `Component "${name}" in record with path "${record.path}" is defined ` +
+              `using "defineAsyncComponent()". ` +
+              `Write "() => import('./MyPage.vue')" instead of ` +
+              `"defineAsyncComponent(() => import('./MyPage.vue'))".`
+          )
         }
       }