stenciljs 学习十二 官方doc 路由使用的例子

路由在单页面应用开发中是一个相对比较重要的位置

以下为官方网站的路由配置

            <stencil-router scrollTopOffset={0}>
              <stencil-route-switch>
                <stencil-route url="/" component="landing-page" exact={true} />
                <stencil-route
                  url="/docs/:pageName"
                  routeRender={(props: { [key: string]: any }) => {
                    const map = {
                      'introduction': 'introduction/why-stencil',
                      'goals-and-objectives': 'introduction/goals-and-objectives',
                      'browser-support': 'introduction/browser-support',
                      'getting-started': 'introduction/getting-started',
                      'my-first-component': 'introduction/my-first-component',
                      'component-lifecycle': 'components/component-lifecycle',
                      'decorators': 'components/decorators',
                      'events': 'components/events',
                      'reactive-data': 'components/reactive-data',
                      'templating-jsx': 'components/templating-and-jsx',
                      'styling': 'components/styling',
                      'forms': 'components/forms',
                      'framework-integration': 'framework-integration/overview',
                      'angular': 'framework-integration/angular',
                      'react': 'framework-integration/react',
                      'vue': 'framework-integration/vue',
                      'ember': 'framework-integration/ember',
                      'javascript': 'framework-integration/javascript',
                      'config': 'tooling/config',
                      'dev-server': 'tooling/dev-server',
                      'prerendering': 'tooling/prerendering',
                      'typed-components': 'tooling/typed-components',
                      'docs-auto-generation': 'tooling/docs-auto-generation',
                      'build-conditionals': 'tooling/build-conditionals',
                      'plugins': 'tooling/plugins',
                      'service-workers': 'guides/service-workers',
                      'distribution': 'guides/distribution',
                      'module-bundling': 'guides/module-bundling',
                      'router': 'guides/router',
                      'state-tunnel': 'guides/state-tunnel',
                      'redux': 'guides/redux',
                      'style-guide': 'guides/style-guide',
                      'testing': 'testing/overview',
                      'unit-testing': 'testing/unit-testing',
                      'e2e-testing': 'testing/e2e-testing',
                      'screenshot-visual-diff': 'testing/screenshot-visual-diff',
                    };
                    return (
                      <document-component
                        pages={[map[props.match.params.pageName]]}
                      />
                    );
                  }}
                />
                <stencil-route url="/demos" component="demos-page" />
                <stencil-route url="/pwa" component="pwas-page" />
                <stencil-route url="/resources" component="resources-page" />
                <stencil-route component='notfound-page'></stencil-route>
              </stencil-route-switch>
            </stencil-router>

说明

这个路由的配置，将基本功能都用上了，比如routeRender 比较好的api 使用说明

参考资料

https://github.com/ionic-team/stencil-site