javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): navigating between parameterized pages now results in page transition (#23525)

Browse Source 
resolves #22662
This commit is contained in:
Liam DeBeasi
2021-06-30 10:11:06 -04:00
committed by GitHub
parent 6ca17805b8
commit e30b17c5bb
9 changed files with 64 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/vue-router/src/viewStacks.ts
View File

@ -23,31 +23,7 @@ export const createViewStacks = (router: Router) => {
}
const findViewItemByRouteInfo = (routeInfo: RouteInfo, outletId?: number) => {
let viewItem = findViewItemByPath(routeInfo.pathname, outletId, false);
/**
* Given a route such as /path/:id,
* going from /page/1 to /home
* to /page/2 will cause the same
* view item from /page/1 to match
* for /page/2 so we need to make
* sure any params get updated.
* Not normally an issue for accessing
* the params via useRouter from vue-router,
* but when passing params as props not doing
* this would cause the old props to show up.
*/
if (viewItem && viewItem.params !== routeInfo.params) {
/**
* Clear the props function result
* as the value may have changed due
* to different props.
*/
delete viewItem.vueComponentData.propsFunctionResult;
viewItem.params = routeInfo.params;
}
return viewItem;
return findViewItemByPath(routeInfo.pathname, outletId, false);
}
const findLeavingViewItemByRouteInfo = (routeInfo: RouteInfo, outletId?: number, mustBeIonRoute: boolean = true) => {
@ -81,6 +57,20 @@ export const createViewStacks = (router: Router) => {
const findMatchedRoute = resolvedPath.matched.find((matchedRoute: RouteLocationMatched) => matchedRoute === viewItem.matchedRoute);
if (findMatchedRoute) {
/**
* /page/1 and /page/2 should not match
* to the same view item otherwise there will
* be not page transition and we will need to
* explicitly clear out parameters from page 1
* so the page 2 params are properly passed
* to the developer's app.
*/
const hasParameter = findMatchedRoute.path.includes(':');
if (hasParameter && path !== viewItem.pathname) {
return false;
}
return viewItem;
}