[Ext JS6]路由(Routing)及使用| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS6]路由(Routing)及使用

## [Ext JS6]路由(Routing)及使用
## 在应用中使用路由（Routing）
在一般的网友中， 点击一个link转到一个新的页面。 但是在单页面的应用中，不会载入新页面，只是和当前页面的组件交互。如何使用浏览器的前进/后退功能，就是 Ext Js5开始的路由功能了。
路由可以追踪应用的浏览器历史记录，可以可以直接链接到应用中的某个部分。这对于将app加到书签和发送连接的场景非常有用。
但是路由不能保存数据和 Session，数据需要存储在类似cookie或是本地存储中。路由仅用来追踪应用的状态。
哈希
https://www.example.com/apps/users#user=1234
user=1234称作哈希。
哈希变化的时候， 浏览器会添加到历史记录。可以使用前进\后退按钮。
### 应用路由的实现方式
Router类是在Ext JS 5中新增的， 用它来处理应用中的哈希变化。Ext.util.History用来配合哈希的变化。路由是与哈希匹配的字符串，允许在Ext应用程序中进行深层链接。看一个实例：
```javascript
Ext.define('MyApp.view.main.MainController', {
extend : 'Ext.app.ViewController',
routes : {
'users' : 'onUsers'    
},    
onUsers : function () {
//...    
}});
```

这个路由会响应#users哈希， 并且执行onUsers方法。
### 更新哈希
控制器有提供redirectTo方法来更新哈希。
this.redirectTo(‘user/1234’);
redirectTo还可以设置选项：
force -如果为true，即使地址栏中的哈希值与传递给redirectTo的哈希值相同，这也会强制路由器做出反应。
replace -默认情况下，将更改散列并创建浏览器历史记录中的新条目。 这意味着浏览器的后退按钮可以返回到前一个哈希。 如果为true，则浏览器历史记录中的当前条目将替换为传递给redirectTo的哈希。
默认令牌-Token
在/app/view/Application.js添加defaultToken配置
```javascript
Ext.define('MyApp.Application', {
	extend : 'Ext.app.Application',
	//...    
	defaultToken : 'home'
});
```

这里会使用#home
启动应用程序时，它将检查URI的当前哈希值。 如果定义了哈希，它将执行路由处理程序。 如果没有找到散列，它将添加#home散列，并且将执行任何路由处理程序以适当地处理它。
### 带参数的哈希
```javascript
Ext.define('Extjs6App.view.main.MainController', {
	extend: 'Ext.app.ViewController', 
	alias: 'controller.main', 
	routes : { 
	'user/:id' : 'onUser'  
	},     
	onItemSelected: function (sender, record) {  
	Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);  
	},   
	onConfirm: function (choice) {    
	if (choice === 'yes') {   
	//       
	}   
	},  
	onUser: function(id){  
	Ext.Msg.alert('Route', 'routes is user/'+id);  
}});
```

在控制器中加入routes， 在浏览器输入 http://localhost:1841/#user/1234， 效果就是会弹出对话框。
最重要的效果是如果输入http://localhost:1841/#user/12345 之后， 可以使用浏览器的后退按钮回到之前的页面了。
### 哈希参数的格式
使用conditions设置参数的格式：
```javascript
Ext.define('MyApp.view.main.MainController', {
	extend : 'Ext.app.ViewController', 
	routes : {    
	'user/:id' : {   
	action     : 'onUser',     
	conditions : {     
	':id' : '([0-9]+)'     
	}     
	}   
	},    
	onUser : function (id) { 
	//...   
}});
```

### 路由的处理
有时候需要阻止路由的处理。比如当前用户是否有权限查看应用程序的某些部分。可以配置before 用来停止当前或所有路由， 或者继续执行。
```javascript
Ext.define('MyApp.view.main.MainController', {  
	extend : 'Ext.app.ViewController', 
	routes : {      
	'user/:id' : {   
	before  : 'onBeforeUser',       
	action  : 'onUser'  
	}   
	},  
	onBeforeUser : function (id, action) {   
	Ext.Ajax.request({       
	url     : '/security/user/' + id, 
	success : function() {  
	action.resume();         
	}      
	});   
	},   
	onUser : function (id) { 
	//...   
}});
```

onBeforeUser的一个参数是id , 第二个参数是 action， 执行 action的 resume方法继续执行。停止路由，
```javascript
onBeforeUser : function (id, action) {    
	Ext.Ajax.request({   
	url     : '/security/user/' + id,        
	success : function () {    
	action.resume();       
	},           
	failure : function () {   
	action.stop();          
	}       
	});  
},
```

### 处理没有匹配的路由
如果修改哈希没有找到对应的路由， 就会触发unmatchedroute?事件
```javascript
Ext.application({   
	name : 'MyApp',  
	listen : {  
	controller : {   
	'#' : {        
	unmatchedroute : 'onUnmatchedRoute' 
	}      
	}   
	}, 
	onUnmatchedRoute : function (hash) {   
	//...   
}});
```

也可以触发一个全局的事件：
```javascript
Ext.application({   
	name : 'MyApp',  
	listen : {  
	global : {     
	unmatchedroute : 'onUnmatchedRoute'   
	}   
	},  
	onUnmatchedRoute : function (hash) {  
	//...    
}});
```

还可以直接使用 Ext的事件
```javascript
Ext.on('unmatchedroute', function (hash) {    //...});
```

### 在单个哈希使用多个路由
使用管道分割符： |
user/1234|messages
就会同时执行两个路由了。
这个默认分割符也可以通过Ext.route.Router.multipleToken修改。
路由的名字也可以修改
```javascript
routes: {   
	'bar' : 'onBar',  
	'baz' : {      
	action : 'onBaz',  
	name   : 'bazRoute' 
	},   
	'foo' : 'onFoo'
}
```

初始哈希可以通过首先传递一个字符串来设置
```javascript
this.redirectTo(‘foo’);
```
如果再加一个的话
```javascript
this.redirectTo({    bar : 'bar'});
```

就是叠加了， 哈希是#foo|bar.
如果已存在的就是替换
```javascript
this.redirectTo({    foo : 'foober'});
```

变成： ?#foober|bar
Hashbang?的支持
Hashbang?会在#之后多一个 !
设置方式 Ext.util.History.hashbang = true;
在
Ext.application({    name : 'MyApp',    router : {        hashbang : true    }});

也可以这样设置：
Ext.route.Router.setHashbang(true);
暂停和恢复路由
一个常见的用例是在应用程序启动时延迟执行路由，直到用户检验完成。
```javascript
Ext.application({
name : 'MyApp',
defaultToken : 'home', 
launch : function () {
var me = this;        
Ext.route.Router.suspend();        
me.checkUserSession().then(me.onUser.bind(me), me.onUserError.bind(me));    
},    
onUser : function (user) {        
MyApp.$user = user;        
Ext.route.Router.resume();    
},    
onUserError : function (error) {        // handle error        // do not execute queued hash changes        
Ext.route.Router.resume(true);        this.redirectTo('login');    }});

```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS6]路由(Routing)及使用

网站导航