程序员经验分享-hwhale

Kendo UI开发教程(24): 单页面应用(二) Router 类

2023-11-01


Route类负责跟踪应用的当前状态和支持在应用的不同状态之间切换。Route通过Url的片段功能（#url)和流量器的浏览历史功能融合在一起。从而可以支持把应用的某个状态作为书签添加到浏览器中。Route也支持通过代码在应用的不同状态之间切换。

Router根路径回调函数

1 <script>
2     var router = new kendo.Router();
3  
4     router.route("/", function() {
5         console.log("/ url was loaded");
6     });
7  
8     $(function() {
9         router.start();
10     });
11 </script>

缺省情况下，如果URL fragment为空，将使用缺省的“/”的根路径，此时对于的回调函数被调用，不管初始URL是什么，这个初始化的回调函数总会调用。
如果使用IE，按F12可以打开Developer Window，选择Console 可以看到console.log 的打印信息。

20130824002

参数

Router 支持bound parameters, optional segments, 和 route globbing，类似于绑定参数，可选参数，匹配符匹配参数等。
例如：绑定参数

1 <script>
2     var router = new kendo.Router();
3  
4     router.route("/items/:category/:id", function(category, id) {
5         console.log(category, "item with", id, " was requested");
6     });
7  
8     $(function() {
9         router.start();
10  
11         // ...
12  
13         router.navigate("/items/books/59");
14     });
15 </script>

当运行这个页面时，注意地址栏中的地址为：

http://localhost:53223/Index.html#/items/books/59 –> #/items/books/59
20130825001

可选参数
如果URL的部分参数为可选的，此时Route的规则为使用”()”,将可选参数放在括号内。

1 <script>
2     var router = new kendo.Router();
3  
4     router.route("/items(/:category)(/:id)", function(category, id) {
5         console.log(category, "item with", id, " was requested");
6     });
7  
8     $(function() {
9         router.start();
10  
11         // ...
12         router.navigate("/items/books/59");
13  
14         // ...
15         router.navigate("/items");
16  
17         // ...
18         router.navigate("/items/books");
19     });
20 </script>

20130825002

使用×通配符匹配参数

1 <script>
2     var router = new kendo.Router();
3  
4     router.route("/items/*suffix", function(suffix) {
5         console.log(suffix);
6     });
7  
8     $(function() {
9         router.start();
10  
11         // ...
12         router.navigate("/items/books/59");
13  
14         // ...
15         router.navigate("/items/accessories");
16  
17         // ...
18         router.navigate("/items/books");
19     });
20 </script>

20130825003

页面切换

navigation方法可以用来切换应用，对应的路径的回调方法被调用,navigation方法修改URL的fragment部分(#后面部分）。
比如：

1 <a href="#/foo">Foo</a>
2  
3 <script>
4     var router = new kendo.Router();
5  
6     router.route("/foo", function() {
7         console.log("welcome to foo");
8     });
9  
10     $(function() {
11         router.start();
12         router.navigate("/foo");
13     });
14 </script>

这个例子，将在地址栏显示 http://xxx/index.html#/foo。
如果对应的路径不存在，Router类触发routeMissing事件，并把URL作为参数传入。

1 <script>
2 var router = new kendo.Router({ routeMissing: function(e) { console.log(e.url) } });
3  
4 $(function() {
5     router.start();
6     router.navigate("/foo");
7 });
8 </script>

你可以通过change事件来截获这种页面之间的切换，然后调用preventDefault阻止页面切换。

1 <script>
2 var router = new kendo.Router({
3     change: function(e) {
4         console.log(url);
5         e.preventDefault();
6     }
7 });
8  
9 $(function() {
10     router.start();
11     router.navigate("/foo");
12 });
13 </script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Kendo 学习教程

Kendo UI开发教程(24): 单页面应用(二) Router 类 的相关文章

  • Windows中你用过的Git账户藏在哪里？

    最近换工作了 新公司也没有自己的Git服务器 所以还是选择了之前用过的Coding net 之前注册的账户用的是上一家公司的邮箱 为免出现不愉快的事情 重新注册了一个账户 顺顺利利地新建项目 clone push 晚上回到家 想clone一

  • mysql增量抽取方法_DataX增量抽取数据

    datax增量项目地址 datax作业配置文件 datax json job setting speed channel 16 content reader name mysqlreader parameter splitPk id use

  • 【数据结构】带头结点的单链表

    数据结构 带头结点的单链表 链表 逻辑连续 物理上不一定连续 带头结点的单链表 结构体 定义结构体 typedef int ELEM TYPE typedef struct Node ELEM TYPE mdata struct Node

  • 九、C++编译过程详解

    九 C 编译过程详解 1 什么是编译器 2 多文件编译与链接 3 为什么需要构建系统 Makefile 4 CMake CMakeLists txt 5 CMake中的静态库和动态库 1 什么是编译器 编译器是一个根据源代码生成机器码的程序

  • Windows获取密码及hash

    前言 在拿到一台 Windows 的管理员权限以后 可以通过多种方法获取 Windows 系统的明文密码或者 hash 值 这将有利于我们在内网中扩大渗透范围 0x01 Mimikatz Mimikat是一个法国人写的轻量级调试器 Mimi

  • 视频压缩之冗余

    视频压缩之冗余 对于数字视频信号 数据量很大 不管是存储还是传输的需要 做压缩处理是必须的 下面我们会做进一步阐述 以记录数字视频的YUV分量格式为例 YUV分别代表亮度与两个色差信号 例如对于现有的PAL制电视系统 其亮度信号采样频率为1

随机推荐

  • 整流器+逆变器。 前级采用PWM整流器，采用双闭环前馈解耦控制

    整流器 逆变器 前级采用PWM整流器 采用双闭环前馈解耦控制 实现并网单位功率因数 稳定直流电压 后级采用两电平逆变器 通过双闭环前馈解耦控制 稳定输出电压 整个仿真环境完全离散化 运行时间更快 主电路与控制部分以不同的步长运行 更加贴合实

  • CentOS7.4 离线升级openssh8.4

    CentOS7 4 离线升级openssh8 4 前言 工作中需要离线升级openssh 网上一些资料说要先安装telnet 这里省略 大家可以先安装telnet 预防更新ssh失败 下载openssl安装包 去https www open

  • 数据分析——时间序列分析模型(AR,MA,ARMA,ARIMA)

    1 概述 时间序列是某个时间段或者某些时间点对应的不同数值的数值对 这些数值对只有两个具体数据 时间要素 数值要素 时间要素可以是某一个时间段或者某一个时刻 例如一个杂货铺一周 七天 的销售额为时间段的时间要素 而一天二十四小时每个整点所对

  • Spring之Bean生命周期源码解析-Bean销毁

    这篇文章是我在系统学习Spring源码之后 基于自己对Spring源码的理解 来详细分析Spring之Bean的销毁过程 目录 前言 一 注册有销毁逻辑的Bean 1 判断当前Bean是否需要销毁 1 1 判断当前Bean是否有销毁方法 1

  • 华为OD机试 - 统计射击比赛成绩（Java）

    题目描述 给定一个射击比赛成绩单 包含多个选手若干次射击的成绩分数 请对每个选手按其最高3个分数之和进行降序排名 输出降序排名后的选手ID序列 条件如下 一个选手可以有多个射击成绩的分数 且次序不固定 如果一个选手成绩少于3个 则认为选手的

  • 03-NodeMCU引脚和接线、点亮外部LED

    Author teacherXue 一 ESP8266 引脚参考 ESP8266 12 E 芯片带有 17 个 GPIO 引脚 并不是所有的ESP8266开发板都开放了所有的GPIO 并且由于电力设计原因 以及有些GPIO有非常特殊的功能

  • malloc函数详解

    一 原型 extern void malloc unsigned int num bytes 头文件 include

  • Pixi的基本使用(5)--寻宝猎人

    寻宝猎人 游戏需求 使用键盘上的箭头键帮助探险家找到宝藏并将其带到出口 怪物在地牢壁之间上下移动 如果探险家触碰到怪物则变成半透明 并且右上角的生命值会减少 如果所有生命值都用光了 会显示 You Lost 如果探险家带着宝藏到达出口 会显

  • QT TCP简单的通信示例

    TCP服务端 第一步 创建监听套接字的QTcpSever QTcpServer m tsTcpServer 第二部步 listen 监听是否有新的连接进来 int iMyport 如果有新的客户端连接的话 会触发信号newConnectio

  • Lyapunov

    一 正定函数 令是向量x的标量函数 S是x空间包含原点的封闭有限区域 如果对于S中所有的x 都有 1 存在且连续 2 3 当时 则V x 是正定的 半正定 的 二 二次型 1 定义 在李雅普诺夫第二方法上的稳定性分析中 二次型函数起着重要作

  • 课时 16 深入理解 etcd：基于原理解析(曾凡松)

    本文将主要分享以下三方面的内容 第一部分 会为大家介绍 etcd 项目发展的整个历程 从诞生至今 etcd 经历的那些重要的时刻 第二部分 会为大家介绍 etcd 的技术架构以及其内部的实现机制 通过对技术架构和内部机制的学习 帮助我们正确

  • 如何在JCreator中导入.jar文件

    本文摘自http www lvchao org 上篇介绍了如何在Eclipse中导入 jar包 这篇将介绍在JCreator中导入 jar包 与上篇一样 先建立一个Project 请注意 建立工程的目的是方便管理和使用 建议那些不喜欢这样做

  • 电脑宏基电脑,【宏基电脑】报价_介绍_图片_评论_咨询-宏基电脑产品大全 -真快乐商城...

    宏基电脑怎么重装系统 标签 时间 2013 10 18 10 27 10 很多朋友有这样的疑问 宏基电脑怎么重装系统 的问题 所以国美小编总结了有关宏基电脑装系统的相关知识 现在和大家一起分享 1 使用宏基电脑自带的系统光盘安装 先要在BI

  • LeetCode 2108. 找出数组中的第一个回文字符串

    给你一个字符串数组 words 找出并返回数组中的 第一个回文字符串 如果不存在满足要求的字符串 返回一个 空字符串 回文字符串 的定义为 如果一个字符串正着读和反着读一样 那么该字符串就是一个 回文字符串 示例 1 输入 words ab

  • multiprocessing.pool详解

    由于python有全局锁限制 如果想利用多核 就需要使用多进程模块 但该模块有很多坑 本篇文章记录一下其用法以及踩过的坑 一 map apply apply async对比 先贴一个对比图 引自multiprocessin pool Mul

  • CmakeList--glog

    file GLOB GLOG LIBRARIES usr lib x86 64 linux gnu libglog so set GLOG INCLUDE DIRS usr include message glog include dirs

  • 安装vb6 正在更新系统 无响应

    新装的win10系统 安装vb6时 最后一直卡在 正在更新系统 程序无响应 没办法 kill掉后 貌似不影响软件使用 但是安装vs6sp6B无法成功安装 解决办法是 不安装 数据访问 组件 参考 http bbs pcbeta com vi

  • 多路采集存储c语言程序,stm32多路巡回数据采集系统设计 含源程序

    此次设计是利用stm32开发板设计的 数据采集系统是模拟域与数字域之间必不可少的纽带 它的存在具有着非常重要的作用 本文介绍的重点是数据采集系统 而该系统硬件部分的重心在于单片机芯片 数据采集与通信控制采用了模块化的设计 数据采集与通信控制

  • qsort的自主实现

    目录 qsort 函数的功能 首先回忆一下冒泡排序是如何实现的 需要改动的地方 compare swap qosrt 函数实现 快速排序实现qsort 已经成功 今天我要分享的是qsort的自主实现 冒泡版qsort 标准是用的快速排序 好

  • Kendo UI开发教程(24): 单页面应用(二) Router 类

    Route类负责跟踪应用的当前状态和支持在应用的不同状态之间切换 Route通过Url的片段功能 url 和流量器的浏览历史功能融合在一起 从而可以支持把应用的某个状态作为书签添加到浏览器中 Route也支持通过代码在应用的不同状态之间切换

热门标签