离子路线
路由组件采用组件并在浏览器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)在内部使用,知道这条路线何时改变。 |