fix(warn): avoid redundant usage warn (#1797)

Co-authored-by: leemove <limu.mzm@bytedance.com>

diff --git a/packages/router/__tests__/RouterView.spec.ts b/packages/router/__tests__/RouterView.spec.ts
index 4781264a3e86873cb16ef57df84cd3e718131613..54fea992cb2d6a5c1b8bbbf3ae0bcf5c0eebb440 100644 (file)
--- a/packages/router/__tests__/RouterView.spec.ts
+++ b/packages/router/__tests__/RouterView.spec.ts
@@ -411,6 +411,32 @@ describe('RouterView', () => {
       expect('can no longer be used directly inside').toHaveBeenWarned()
     })
 
+    it('does not warn if RouterView is not a direct-child of transition', async () => {
+      const route = createMockedRoute(routes.root)
+      mount(
+        {
+          template: `
+        <transition>
+          <div>
+            <router-view/>
+          </div>
+        </transition>
+        `,
+        },
+        {
+          props: {},
+          global: {
+            stubs: {
+              transition: false,
+            },
+            provide: route.provides,
+            components: { RouterView },
+          },
+        }
+      )
+      expect('can no longer be used directly inside').not.toHaveBeenWarned()
+    })
+
     it('warns if Transition wraps a RouterView', () => {
       const route = createMockedRoute(routes.root)
       const wrapper = mount(

diff --git a/packages/router/src/RouterView.ts b/packages/router/src/RouterView.ts
index 4ad60d038665def58d8a077662372fc6369f340d..ad4d8f720a5004c9ad8d079ea0d236555bfe48d6 100644 (file)
--- a/packages/router/src/RouterView.ts
+++ b/packages/router/src/RouterView.ts
@@ -15,6 +15,7 @@ import {
   watch,
   Slot,
   VNode,
+  Component,
 } from 'vue'
 import {
   RouteLocationNormalized,
@@ -240,9 +241,13 @@ export const RouterView = RouterViewImpl as unknown as {
 function warnDeprecatedUsage() {
   const instance = getCurrentInstance()!
   const parentName = instance.parent && instance.parent.type.name
+  const parentSubTreeType =
+    instance.parent && instance.parent.subTree && instance.parent.subTree.type
   if (
     parentName &&
-    (parentName === 'KeepAlive' || parentName.includes('Transition'))
+    (parentName === 'KeepAlive' || parentName.includes('Transition')) &&
+    typeof parentSubTreeType === 'object' &&
+    (parentSubTreeType as Component).name === 'RouterView'
   ) {
     const comp = parentName === 'KeepAlive' ? 'keep-alive' : 'transition'
     warn(