stenciljs 学习十三 @stencil/router 组件使用说明
2018-09-27 15:23
477 查看
@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);
参考资料
相关文章推荐
- Vue.js入门学习--组件使用说明(九)
- stenciljs 学习一 web 组件开发
- JS拖拽组件学习使用
- Vue.js学习系列(八)---如何使用组件
- stenciljs 学习九 使用jsx
- stenciljs 学习八 组件测试
- stenciljs 学习三 组件生命周期
- Vue.js入门学习--组件的注册使用+开奖小游戏(八)
- JsSocket,Js+Flex+Java模拟的JsSocket组件使用说明
- stenciljs 学习四 组件装饰器
- JS拖拽组件学习使用
- Vue.js入门学习--父子组件的说明和简单通信(十)
- Vue.js入门学习--组件的注册和使用(二)
- stenciljs 学习六 组件开发样式指南
- Windows窗体编程基础学习:使用 NotifyIcon 组件向任务栏添加应用程序图标
- JAVA commons-fileupload文件上传组件使用说明
- Lucas.Data数据库访问组件使用说明
- Adodb.Stream 组件的使用说明
- Windows窗体编程基础学习:使用 NotifyIcon 组件向任务栏添加应用程序图标
- JS 操作IE游览器常用函数使用说明