搜索文件 /

离子路线

路由组件采用组件并在浏览器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.
                  
                  的)
                  ;
                 
                  返回
                 
                  
                 角色
                  ===.
                 
                  '取消'
                  的)
                 
                  
                 
                  错误的
                 
                  
                 
                  真的
                  ;
                 
                  }
                 
                  
                 脚本
                 >
复制 复制

特性

前后

描述

路由尝试进入时触发的导航挂钩。返回真的允许导航继续,同时返回错误的导致它被取消。返回A.NavigationHookOptions.对象使路由器重定向到指定的路径。

类型 (()=> NavigationHookResult |承诺)|不明确的

beforeleave.

描述

路线试图离开时被解雇的导航挂钩。返回真的允许导航继续,同时返回错误的导致它被取消。返回A.NavigationHookOptions.对象使路由器重定向到指定的路径。

类型 (()=> NavigationHookResult |承诺)|不明确的

零件

描述

在导航插座中加载/选择的组件的名称(离子标签离子导航)当路线匹配时。

此属性的值并不总是加载组件的标记名离子标签它实际上是指的名称离子标签选择。

属性 零件
类型 细绳

组成份额

描述

关键值{'红色':真实,'蓝':'白色'}包含应在呈现时传递给定义的组件的道具。

类型 未定义|{[key:string]:任何;}

URL.

描述

需要匹配的相对路径,以便此路线应用。

接受类似于ExpressJ的路径,以便您可以在URL / foo /:bar中定义参数,其中栏将在传入的道具中使用。

属性 URL.
类型 细绳
默认 ''

事件

姓名 描述
IonRoutedataChanged 通过`离子路由器(ION-Router)在内部使用,知道这条路线何时改变。
Baidu