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

fix(router): rename API to match stencil-router

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-03-13 23:40:16 +01:00
parent b4f46ee3d2
commit e729610dc8
6 changed files with 20 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components.d.ts vendored
View File

@ -2601,9 +2601,9 @@ declare global {
namespace JSXElements {
export interface IonRouteAttributes extends HTMLAttributes {
component?: string;
params?: {[key: string]: any};
path?: string;
componentProps?: {[key: string]: any};
redirectTo?: string;
url?: string;
}
}
}

12
core/src/components/route/readme.md
View File

@ -12,17 +12,17 @@
string
#### params
#### componentProps
#### path
#### redirectTo
string
#### redirectTo
#### url
string
@ -34,17 +34,17 @@ string
string
#### params
#### component-props
#### path
#### redirect-to
string
#### redirect-to
#### url
string

4
core/src/components/route/route.tsx
View File

@ -5,8 +5,8 @@ import { Component, Prop } from '@stencil/core';
tag: 'ion-route'
})
export class Route {
@Prop() path = '';
@Prop() url = '';
@Prop() component: string;
@Prop() redirectTo: string;
@Prop() params: {[key: string]: any};
@Prop() componentProps: {[key: string]: any};
}

12
core/src/components/router/test/basic/index.html
View File

@ -106,16 +106,16 @@
<ion-app>
<ion-router>
<ion-route path="/" component="tab-one"> </ion-route>
<ion-route url="/" component="tab-one"> </ion-route>
<ion-route path="/two" component="tab-two">
<ion-route url="/two" component="tab-two">
<ion-route component="page-one"> </ion-route>
<ion-route path="/second-page" component="page-two"> </ion-route>
<ion-route path="/three-page" component="page-three"> </ion-route>
<ion-route url="/second-page" component="page-two"> </ion-route>
<ion-route url="/three-page" component="page-three"> </ion-route>
</ion-route>
<ion-route path="/three" component="tab3"> </ion-route>
<ion-route path="/four" component="tab4"> </ion-route>
<ion-route url="/three" component="tab3"> </ion-route>
<ion-route url="/four" component="tab4"> </ion-route>
</ion-router>

2
core/src/components/router/test/parser.spec.tsx
View File

@ -60,7 +60,7 @@ describe('flattenRouterTree', () => {
export function mockRouteElement(path: string, component: string) {
const el = mockElement('ion-route');
el.setAttribute('path', path);
el.setAttribute('url', path);
(el as any).component = component;
return el;
}

10
core/src/components/router/utils/parser.ts
View File

@ -10,7 +10,7 @@ export function readRedirects(root: Element): RouteRedirect[] {
throw new Error('Can\'t mix the component and redirectTo attribute in the same ion-route');
}
return {
path: parsePath(readProp(el, 'path')),
path: parsePath(readProp(el, 'url')),
to: parsePath(readProp(el, 'redirectTo'))
};
});
@ -20,14 +20,10 @@ export function readRoutes(root: Element): RouteTree {
return (Array.from(root.children) as HTMLIonRouteElement[])
.filter(el => el.tagName === 'ION-ROUTE' && el.component)
.map(el => {
const path = parsePath(readProp(el, 'path'));
if (path.includes(':id')) {
console.warn('Using ":id" is not recommended in `ion-route`, it causes conflicts in the DOM');
}
return {
path: path,
path: parsePath(readProp(el, 'url')),
id: readProp(el, 'component').toLowerCase(),
params: el.params,
params: el.componentProps,
children: readRoutes(el)
};
});