路由在单页面应用开发中是一个相对比较重要的位置
以下为官方网站的路由配置
<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 使用说明