fix(vue): improve path matching when going back (#22275)

resolves #22258

packages/vue-router/src/viewStacks.ts

@@ -1,12 +1,18 @@
 import { generateId } from './utils';
+import { pathToRegexp } from './regexp';
 import {  RouteInfo,
   ViewItem,
   ViewStacks,
 } from './types';
+import { RouteLocationMatched } from 'vue-router';
 
 export const createViewStacks = () => {
   let viewStacks: ViewStacks = {};
 
+  const clear = (outletId: number) => {
+    delete viewStacks[outletId];
+  }
+
   const getViewStack = (outletId: number) => {
     return viewStacks[outletId];
   }
@@ -47,24 +53,41 @@ export const createViewStacks = () => {
   }
 
   const findViewItemByPath = (path: string, outletId?: number): ViewItem | undefined => {
+    const matchView = (viewItem: ViewItem) => {
+      const pathname = path;
+      const viewItemPath = viewItem.matchedRoute.path;
+
+      const regexp = pathToRegexp(viewItemPath, [], {
+        end: viewItem.exact,
+        strict: viewItem.exact,
+        sensitive: false
+      });
+      return (regexp.exec(pathname)) ? viewItem : undefined;
+    }
+
     if (outletId) {
       const stack = viewStacks[outletId];
       if (!stack) return undefined;
-      return findViewItemInStack(path, stack);
-    }
 
-    for (let outletId in viewStacks) {
-      const stack = viewStacks[outletId];
-      const viewItem = findViewItemInStack(path, stack);
+      const quickMatch = findViewItemInStack(path, stack);
+      if (quickMatch) return quickMatch;
 
-      if (viewItem) {
-        return viewItem;
+      const match = stack.find(matchView);
+      if (match) return match;
+    } else {
+      for (let outletId in viewStacks) {
+        const stack = viewStacks[outletId];
+        const viewItem = findViewItemInStack(path, stack);
+        if (viewItem) {
+            return viewItem;
+        }
       }
     }
+
     return undefined;
   }
 
-  const createViewItem = (outletId: number, vueComponent: any, matchedRoute: any, routeInfo: RouteInfo, ionPage?: HTMLElement): ViewItem => {
+  const createViewItem = (outletId: number, vueComponent: any, matchedRoute: RouteLocationMatched, routeInfo: RouteInfo, ionPage?: HTMLElement): ViewItem => {
     return {
       id: generateId('viewItem'),
       pathname: routeInfo.pathname,
@@ -73,7 +96,8 @@ export const createViewStacks = () => {
       ionPageElement: ionPage,
       vueComponent,
       ionRoute: false,
-      mount: false
+      mount: false,
+      exact: routeInfo.pathname === matchedRoute.path
     };
   }
 
@@ -105,6 +129,7 @@ export const createViewStacks = () => {
   }
 
   return {
+    clear,
     findViewItemByRouteInfo,
     findViewItemByMatchedRoute,
     findLeavingViewItemByRouteInfo,