stenciljs 学习七 路由

Posted 2021-01-08 rongfengliang-荣锋亮

stenciljs路由类似react router

安装

npm install @stencil/router --save 

包含的组件

• stencil-router
  项目中应该只有一个模板路由器组件。此组件控制与浏览器历史记录的所有交互，
  并通过事件系统聚合更新
• stencil-route
  此组件基于提供的URL是否与当前位置匹配来呈现。
  包含的属性

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

• stencil-route-link
  此组件用于渲染指向已定义路由的链接。可以与当前地址是否匹配应用特定样式。
  包含的属性

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

• stencil-route-redirect
  url 地址重定向

配置路由

<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

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

• 编程方式
  import 操作方法

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);

url 参数

• 传递的方式

<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;

说明

最简单的方式，可以直接使用脚手工具，创建app，包含router demo

参考资料

https://stenciljs.com/docs/router/