搜索文档 /

ion-router

路由器是一个在vanilla和Stencil JavaScript项目中处理路由的组件。

注意:这个组件应该只用于vanilla和Stencil JavaScript项目。对于Angular项目,使用 ion-router-outlet 和Angular的路由器。

应用程序应该有一个单一的 ion-router 组件中的代码库。该组件控制与浏览器历史记录的所有交互,并通过事件系统聚合更新。

ion-router 只是一个URL协调器的导航出口离子:betway东盟体育app ion-nav ion-tabs

这意味着 ion-router 从不接触DOM,它不会显示组件或发出任何类型的生命周期事件,它只是告诉 ion-nav ion-tabs 根据浏览器的URL“显示”什么和什么时候。

为了在组件(加载/选择)和url之间配置这种关系, ion-router 使用JSX/HTML声明式语法定义路由树。

使用


                  <
                 ion-router
                 >
               
                  <
                 ion-route
                
                 组件
                  
                  
                 页面选项卡
                  
                 >
               
                  <
                 ion-route
                
                 url
                  
                  
                 /时间表
                  
                
                 组件
                  
                  
                 tab-schedule
                  
                 >
               
                  <
                 ion-route
                
                 组件
                  
                  
                 page-schedule
                  
                 >
                  
                 ion-route
                 >
               
                  <
                 ion-route
                
                 url
                  
                  
                 /会议/:sessionId
                  
                
                 组件
                  
                  
                 page-session
                  
                 >
                  
                 ion-route
                 >
               
                  
                 ion-route
                 >
               
                  <
                 ion-route
                
                 url
                  
                  
                 /人
                  
                
                 组件
                  
                  
                 tab-speaker
                  
                 >
               
                  <
                 ion-route
                
                 组件
                  
                  
                 page-speaker-list
                  
                 >
                  
                 ion-route
                 >
               
                  <
                 ion-route
                
                 url
                  
                  
                 /会议/:sessionId
                  
                
                 组件
                  
                  
                 page-session
                  
                 >
                  
                 ion-route
                 >
               
                  <
                 ion-route
                
                 url
                  
                  
                 /: speakerId
                  
                
                 组件
                  
                  
                 page-speaker-detail
                  
                 >
                  
                 ion-route
                 >
               
                  
                 ion-route
                 >
               
                  <
                 ion-route
                
                 url
                  
                  
                 /图
                  
                
                 组件
                  
                  
                 page-map
                  
                 >
                  
                 ion-route
                 >
               
                  <
                 ion-route
                
                 url
                  
                  
                 /对
                  
                
                 组件
                  
                  
                 页面
                  
                 >
                  
                 ion-route
                 >
               
                  
                 ion-route
                 >
               
                  <
                 ion-route
                
                 url
                  
                  
                 /教程
                  
                
                 组件
                  
                  
                 page-tutorial
                  
                 >
                  
                 ion-route
                 >
               
                  <
                 ion-route
                
                 url
                  
                  
                 /登录
                  
                
                 组件
                  
                  
                 page-login
                  
                 >
                  
                 ion-route
                 >
               
                  <
                 ion-route
                
                 url
                  
                  
                 /账户
                  
                
                 组件
                  
                  
                 page-account
                  
                 >
                  
                 ion-route
                 >
               
                  <
                 ion-route
                
                 url
                  
                  
                 /注册
                  
                
                 组件
                  
                  
                 page-signup
                  
                 >
                  
                 ion-route
                 >
               
                  <
                 ion-route
                
                 url
                  
                  
                 /支持
                  
                
                 组件
                  
                  
                 页支持
                  
                 >
                  
                 ion-route
                 >
               
                  
                 ion-router
                 >
               
复制 复制

属性

描述

匹配url时要使用的根路径。默认情况下,它被设置为“/”,但是您可以为所有URL路径指定一个替代前缀。

属性
类型 字符串
默认的 ' / '

useHash

描述

路由器可以在两种模式下工作:

  • 散列:/ /页面/ index . html # /路径
  • 没有散列:/ /页面/路径

使用其中一种或另一种可能取决于应用程序的需求和/或它的部署位置。

通常“无哈希”导航对SEO更好,也更友好,但它可能需要额外的服务器端配置才能正常工作。

另一方面,散列导航更容易部署,它甚至可以在文件协议上工作。

默认情况下,此属性为真正的改变,允许无哈希值的url。

属性 use-hash
类型 布尔
默认的 真正的

事件

的名字 描述
ionRouteDidChange 当路线改变时发出
ionRouteWillChange 当路由即将更改时触发的事件

方法

回来

描述

在窗口。history中返回上一页。

签名 () = > <承诺无效>

描述

导航到指定的URL。

签名 push (url:字符串,方向?: RouterDirection,动画吗?: AnimationBuilder | undefined) =>承诺<布尔>
Baidu