stenciljs 学习十三 @stencil/router 组件使用说明

@stencil/router 组件包含的子组件

stencil-router
stencil-route-switch
stencil-route
stencil-route-link
stencil-route-redirect
stencil-route-title

stencil-router 说明

参数：
root 根路径路由处理的为位置
historyType history 类型 browser 或者hash
titlesuffix 页面title 的后缀，可以通过routetitle 更新
参考格式：

<stencil-router titleSuffix=" - My App">

  <stencil-route-switch scrollTopOffset={0}>

    <stencil-route url="/" component="landing-page" exact={true} />

    <stencil-route url="/demos" component="demos-page" />

    <stencil-route url="/other" component="other-page" />

    <stencil-route component="page-not-found" />

  </stencil-route-switch>

</stencil-router>

stencil-route-switch

参考格式：

<stencil-router>

  <stencil-route-switch scrollTopOffset={0}>

    <stencil-route url="/" component="landing-page" exact={true}/>

    <stencil-route url="/demos" component="demos-page" />

    <stencil-route component="catch-all" />

  </stencil-route-switch>

</stencil-router>

用户认证路由配置

使用了一个routerender 并定义自定义配置
参考

const PrivateRoute = ({ component, ...props}: { [key: string]: any}) => {

  const Component = component;

  const redirectUrl = props.failureRedirect | '/login';

  return (

    <stencil-route {...props} routeRender={

      (props: { [key: string]: any}) => {

        if (auth.isAuthenticated) {

          return <Component {...props} {...props.componentProps}></Component>;

        }

        return <stencil-router-redirect url="/login"></stencil-router-redirect>

      }

    }/>

  );

}

auth

const auth = {

  isAuthenticated: false,

  authenticate: function() {

    this.isAuthenticated = true;

  },

  logout: function() {

    this.isAuthenticated = false;

  }

}

const isAuthenticated = (): boolean => {

  return isUserLoggedIn;

}

配置router

<stencil-router titleSuffix="My App - ">

  <stencil-route-switch scrollTopOffset={0}>

    <stencil-route url="/" component="landing-page" exact={true} />

    <PrivateRoute url="/user" component="user-info" />

    <PrivateRoute url="/org" component="org-info" />

  </stencil-route-switch>

</stencil-router>

stencil-route 配置每条路由

基本配置

 <stencil-route url="/" component="landing-page" exact={true} />

多路径配置

  <stencil-route url={["/", "home"]} component="landing-page" exact={true} />

路由参数

  <stencil-route url="/page/:pageNum(\\d+)" component="page-item" />

  <stencil-route url="/user/:name?" component="user-page" />

  <stencil-route url="/user*" component="user-page" />

组件属性传递

  <stencil-route url="/" component="landing-page"

    componentProps={{ firstName: 'Ellie' }} />

配置routerender函数

<stencil-route url="/" exact={true} routeRender={

    (props: { [key: string]: any}) => {

      return <span>Hello {props.firstName}</span>;

    }

  } />

stencil-route-link 配置

基本配置
可以配置连接的地址，样式

  <stencil-route-link url="/" exact={true}>Home</stencil-route-link>

  <stencil-route-link url="/info" urlMatch="/info/*">Information</stencil-route-link>

  <stencil-route-link url="/info" activeClass="link-active">

    Information

  </stencil-route-link>

锚属性配置

  <stencil-route-link

    url="/"

    anchorClass="site-link"

    anchorRole="link"

    anchorTitle="Home link"

    anchorTabIndex="2"

  >

    Home

  </stencil-route-link>

stencil-route-redirect 配置重定向

就一个参数url
参考:

  <stencil-route-redirect url="/" />

stencil-route-title

更新页面的title,主要参数title

  <stencil-route-title title="Home" />

not found 路由配置

可以方便的使用stencil-route-switch 处理

<stencil-router>

  <stencil-route-switch scrollTopOffset={0}>

    <stencil-route url="/" component="landing-page" exact={true}/>

    <stencil-route url="/demos" component="demos-page" />

    <stencil-route component="catch-all" />

  </stencil-route-switch>

</stencil-router>

编程使用

导入方法

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

export class askPage {

  @Prop() history: RouterHistory;

}

基本方法

// pushing a route (going forwards to a certain route)

this.history.push(`/demos`, {});

// popping a route (going back to a certain route)

this.history.pop('/home', {});

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

参考资料

https://github.com/ionic-team/stencil-router/wiki

 
 
 
 

stenciljs 学习十三 @stencil/router 组件使用说明的相关教程结束。