如何在浏览器刷新时使用选项卡维护页面状态

时间:2015-03-06 12:59:11

标签: extjs single-page-application extjs5 browser-refresh

在ExtJs中,处理浏览器刷新的最佳方法是什么?

说,我的页面有两个标签 A和B 标签A处于活动状态时的标记是#mytoken /:someidforA 选项卡B为actibe时的标记是#mytoken /:someidforB

当我们刷新浏览器时,我们如何确保页面保持在同一个标​​签页?

我在ExtJs5中使用路由器做了类似的事情

window.onbeforeunload = function() {
    token = // get history token
     MyApp.getController('Main').redirectTo(token);
}

并在ViewControllers中 -

routes: {
    "#mytoken/:someidforA" : "loadA",
    "#mytoken/:someidforB" : "loadB" 

}

这是一个很好的方法吗?

1 个答案:

答案 0 :(得分:2)

我个人会使用记录在案的routes

示例:

Ext.define('MyApp.view.main.MainController', {
    extend : 'Ext.app.ViewController',

    routes : {
        'user/:id' : 'onUser'
    },

    onUser : function(id) {
        //...
    }
});

您还可以使用defaultToken属性定义默认路由:

defaultToken : 'home'

您好像已经在使用其中一些功能了。如果URL类似于example.com/#user/4,则在页面刷新时,应用程序可以像以前一样处理此路由并显示相同的页面/部分。

要恢复在刷新之前打开的所有标签页,您可能需要使用localstorage之类的内容来保持页面刷新状态