stenciljs 学习七 路由

npm install @stencil/router --save 

url (Array||string)  同时可以传递参数 /foo/:bar
component (string) 组件名称
componentProps （组件的属性）包含传递给组件渲染的数据
routeRender （function） 接受属性作为参数的函数。如果存在，则将使用它来代替定义的组件
exact （boolean） 如果为true，则只有当url与该地址完全匹配时才呈现此路由，如果为false，则在当前url‘匹配‘定义的url时呈现

url (string) 连接的路径
exact (boolean)  如果为true，则只有当url与该地址完全匹配时才应用activeclass
activeClass （string） 匹配时候应用的css效果

<stencil-router>
  <stencil-route url="/" component="landing-page" exact={true}/>
  <stencil-route url="/demos" component="demos-page"/>
  <stencil-route url="/demos/rendering" component="fiber-demo"/>
  <stencil-route url="/docs" component="docs"/>
  <stencil-route url="/docs/getting-started" component="getting-started"/>
  <stencil-route url="/components" component="basics-components"/>
</stencil-router>

<stencil-route-link url="/">
<stencil-route-link url="/demos">
<stencil-route-link url="/docs/getting-started">

import { RouterHistory } from ‘@stencil/router‘;

export class askPage {
  @Prop() history: RouterHistory;
}

// pushing a route (going forwards to a certain route)
this.history.push(`/demos`, {});

// navigate back as if the user hit the back button in the browser
this.history.goBack();

// navigate forwards as if the user hit the forwards button in the browser
this.history.goForward();

// replace the current nav history and reset to a certain route
this.history.replace(‘/‘, {});

// navigate through the history stack by `n` entries
this.history.go(n: number);

<stencil-route url=‘/show/:pageNum‘ component=‘show-page‘ />
<stencil-route-link url={`/show/${someData}`} />

import { MatchResults } from ‘@stencil/router‘;
...
export class ShowPage {
  @Prop() match: MatchResults;
}

const myData = this.match.params.pageNum;