离子路线
路由组件采用组件并在浏览器URL与URL属性匹配时呈现它。
注意：此组件应仅与vanilla和Stencil JavaScript项目一起使用。对于角度的项目，使用
和角路由器。 离子路由器出口
导航钩子
导航挂钩可用于执行任务或充当导航卫兵。通过提供功能来使用钩子
前后
和
beforeleave.
每个属性
离子路线
。返回
真的
允许导航继续，同时返回
错误的
导致它被取消。返回类型的对象
NavigationHookOptions.
允许您将导航重定向到另一个页面。
界面
界面
NavigationHookOptions.
{
/ ** *将导航重定向到的有效路径。* /
重定向
：
细绳
;
}用法
<
离子路由器
>
<
离子路线
URL.
=
“
/家
“
零件
=
“
页面家
“
>
离子路线
>
<
离子路线
URL.
=
“
/仪表板
“
零件
=
“
页面仪表板
“
>
离子路线
>
<
离子路线
URL.
=
“
/新消息
“
零件
=
“
页面新消息
“
>
离子路线
>
<
离子路线
URL.
=
“
/登录
“
零件
=
“
页面登录
“
>
离子路线
>
离子路由器
>
Const.
仪表板页
=
文档
。
QuerySelector.
（
'离子 - 路由[URL =“/仪表板”]'
的）
;
仪表板页
。
前后
=
islogginginguard.
;
Const.
newmessagepage.
=
文档
。
QuerySelector.
（
'离子 - 路由[URL =“/仪表板”]'
的）
;
newmessagepage.
。
beforeleave.
=
HasunsavedDataguard.
;
Const.
islogginginguard.
=
异步
（
的）
=>
{
Const.
isloggedin
=
等待
用户数据
。
isloggedin
（
的）
;
//用实际登录验证替换它
如果
（
isloggedin
的）
{
返回
真的
;
}
别的
{
返回
{
重定向
：
'/登录'
}
;
//如果用户未登录，则它们将被重定向到/登录页面
}
}
Const.
HasunsavedDataguard.
=
异步
（
的）
=>
{
Const.
hasunsaveddata.
=
等待
CheckData.
（
的）
;
//用实际验证替换它
如果
（
hasunsaveddata.
的）
{
返回
等待
确认iscardChanges.
（
的）
;
}
别的
{
返回
真的
;
}
}
Const.
确认iscardChanges.
=
异步
（
的）
=>
{
Const.
警报
=
文档
。
牧马赛
（
'离子警报'
的）
;
警报
。
标题
=
'丢弃未保存的变化？'
;
警报
。
信息
=
“你确定要离开吗？任何未保存的变化都会丢失。
;
警报
。
纽扣
=
[
{
文本
：
'取消'
那
角色
：
'取消'
那
}
那
{
文本
：
'丢弃'
那
角色
：
'破坏'
那
}
]
;
文档
。
身体
。
阑尾
（
警报
的）
;
等待
警报
。
展示
（
的）
;
Const.
{
角色
}
=
等待
警报
。
ondiddismiss.
（
的）
;
返回
（
角色
===.
'取消'
的）
还
错误的
：
真的
;
}
进口
{
零件
那
H
}
从
'@模板/核心'
;
进口
{
alertcontroller.
}
从
'@betway东盟体育app离子/核心'
;
@
零件
（
{
标签
：
'路由器 - 例'
那
styleurl.
：
'router-example.css'
}
的）
出口
班级
forerexample.
{
使成为
（
的）
{
返回
（
<
离子
-
路由器
>
<
离子
-
路线网址
=
“/家”
零件
=
“页面家”
>
<
/
离子
-
路线
>
<
离子
-
路线网址
=
“/仪表板”
零件
=
“页面仪表板”
前后
=
{
islogginginguard.
}
>
<
/
离子
-
路线
>
<
离子
-
路线网址
=
“/新消息”
零件
=
“页面新消息”
beforeleave.
=
{
HasunsavedDataguard.
}
>
<
/
离子
-
路线
>
<
离子
-
路线网址
=
“/登录”
零件
=
“页面登录”
>
<
/
离子
-
路线
>
<
/
离子
-
路由器
>
的）
}
}
Const.
islogginginguard.
=
异步
（
的）
=>
{
Const.
isloggedin
=
等待
用户数据
。
isloggedin
（
的）
;
//用实际登录验证替换它
如果
（
isloggedin
的）
{
返回
真的
;
}
别的
{
返回
{
重定向
：
'/登录'
}
;
//如果用户未登录，则它们将被重定向到/登录页面
}
}
Const.
HasunsavedDataguard.
=
异步
（
的）
=>
{
Const.
hasunsaveddata.
=
等待
CheckData.
（
的）
;
//用实际验证替换它
如果
（
hasunsaveddata.
的）
{
返回
等待
确认iscardChanges.
（
的）
;
}
别的
{
返回
真的
;
}
}
Const.
确认iscardChanges.
=
异步
（
的）
=>
{
Const.
警报
=
等待
alertcontroller.
。
创建
（
{
标题
：
'丢弃未保存的变化？'
那
信息
：
“你确定要离开吗？任何未保存的变化都会丢失。
那
纽扣
：
[
{
文本
：
'取消'
那
角色
：
'取消'
那
}
那
{
文本
：
'丢弃'
那
角色
：
'破坏'
那
}
]
}
的）
;
等待
警报
。
展示
（
的）
;
Const.
{
角色
}
=
等待
警报
。
ondiddismiss.
（
的）
;
返回
（
角色
===.
'取消'
的）
还
错误的
：
真的
;
}
<
模板
>
<
离子路由器
>
<
离子路线
URL.
=
“
/家
“
零件
=
“
页面家
“
>
离子路线
>
<
离子路线
URL.
=
“
/仪表板
“
零件
=
“
页面仪表板
“
：开心
=
“
islogginginguard.
“
>
离子路线
>
<
离子路线
URL.
=
“
/新消息
“
零件
=
“
页面新消息
“
：BeForeleave.
=
“
HasunsavedDataguard.
“
>
离子路线
>
<
离子路线
URL.
=
“
/登录
“
零件
=
“
页面登录
“
>
离子路线
>
离子路由器
>
模板
>
<
脚本
>
进口
{
alertcontroller.
}
从
'@betway东盟体育app ionic / vue'
;
Const.
islogginginguard.
=
异步
（
的）
=>
{
Const.
isloggedin
=
等待
用户数据
。
isloggedin
（
的）
;
//用实际登录验证替换它
如果
（
isloggedin
的）
{
返回
真的
;
}
别的
{
返回
{
重定向
：
'/登录'
}
;
//如果用户未登录，则它们将被重定向到/登录页面
}
}
Const.
HasunsavedDataguard.
=
异步
（
的）
=>
{
Const.
hasunsaveddata.
=
等待
CheckData.
（
的）
;
//用实际验证替换它
如果
（
hasunsaveddata.
的）
{
返回
等待
确认iscardChanges.
（
的）
;
}
别的
{
返回
真的
;
}
}
Const.
确认iscardChanges.
=
异步
（
的）
=>
{
Const.
警报
=
等待
alertcontroller.
。
创建
（
{
标题
：
'丢弃未保存的变化？'
那
信息
：
“你确定要离开吗？任何未保存的变化都会丢失。
那
纽扣
：
[
{
文本
：
'取消'
那
角色
：
'取消'
那
}
那
{
文本
：
'丢弃'
那
角色
：
'破坏'
那
}
]
}
的）
;
等待
警报
。
展示
（
的）
;
Const.
{
角色
}
=
等待
警报
。
ondiddismiss.
（
的）
;
返回
（
角色
===.
'取消'
的）
还
错误的
：
真的
;
}
脚本
>特性
前后 |
|
|---|---|
| 描述 |
路由尝试进入时触发的导航挂钩。返回 |
| 类型 |
（（）=> NavigationHookResult |承诺 |
beforeleave. |
|
| 描述 |
路线试图离开时被解雇的导航挂钩。返回 |
| 类型 |
（（）=> NavigationHookResult |承诺 |
零件 |
|
| 描述 |
在导航插座中加载/选择的组件的名称（ 此属性的值并不总是加载组件的标记名 |
| 属性 |
零件 |
| 类型 |
细绳 |
组成份额 |
|
| 描述 |
关键值 |
| 类型 |
未定义|{[key：string]：任何;} |
URL. |
|
| 描述 |
需要匹配的相对路径，以便此路线应用。 接受类似于ExpressJ的路径，以便您可以在URL / foo /：bar中定义参数，其中栏将在传入的道具中使用。 |
| 属性 |
URL. |
| 类型 |
细绳 |
| 默认 |
'' |
事件
| 姓名 | 描述 |
|---|---|
IonRoutedataChanged |
通过`离子路由器（ION-Router）在内部使用，知道这条路线何时改变。 |