diff --git a/Gruntfile.js b/Gruntfile.js
index 8a50c3f89..e81af8caa 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -223,7 +223,6 @@ module.exports = function (grunt) {
         },
 
 
-
         less: {
             demo: {
                 expand: true,
@@ -332,7 +331,7 @@ module.exports = function (grunt) {
         },
         watch: {
             scripts: {
-                files: ["src/**/*.js", "src/**/*.less", "demo/js/**/*.js", "demo/version.js", "demo/config.js", "demo/less/**/*.less"],
+                files: ["src/**/*.js", "src/**/*.less", "demo/js/**/*.js", "demo/app.js", "demo/version.js", "demo/config.js", "demo/less/**/*.less"],
                 tasks: ["less", "concat"],
                 options: {
                     spanw: true,
diff --git a/demo/app.js b/demo/app.js
index c393f10e6..c2ccef448 100644
--- a/demo/app.js
+++ b/demo/app.js
@@ -3,21 +3,40 @@ Demo = {
 };
 $(function () {
     var ref;
-    var AppRouter = BI.inherit(BI.Router, {
+
+    BI.each(Demo.CONFIG, function (index, item) {
+        !item.id && (item.id = item.value || item.text);
+    });
+    var tree = BI.Tree.transformToTreeFormat(Demo.CONFIG);
+
+    var obj = {
         routes: {
             "": "index"
         },
         index: function () {
-            BI.createWidget({
-                type: "demo.main",
-                ref: function (_ref) {
-                    console.log(_ref);
-                    ref = _ref;
-                },
-                element: "#wrapper"
-            });
+            Demo.showIndex = "demo.face";
+        }
+    };
+
+    BI.Tree.traversal(tree, function (index, node) {
+        if (!node.children || BI.isEmptyArray(node.children)) {
+            obj.routes[node.text] = node.text;
+            obj[node.text] = function () {
+                Demo.showIndex = node.value;
+            };
         }
     });
+
+    var AppRouter = BI.inherit(BI.Router, obj);
     new AppRouter;
     BI.history.start();
+
+    BI.createWidget({
+        type: "demo.main",
+        ref: function (_ref) {
+            console.log(_ref);
+            ref = _ref;
+        },
+        element: "#wrapper"
+    });
 });
\ No newline at end of file
diff --git a/demo/js/center.js b/demo/js/center.js
index c51f314d1..11bae6177 100644
--- a/demo/js/center.js
+++ b/demo/js/center.js
@@ -10,7 +10,7 @@ Demo.Center = BI.inherit(BI.Widget, {
                 self.tab = this;
             },
             single: true,
-            showIndex: "demo.face",
+            showIndex: Demo.showIndex,
             cardCreator: function (v) {
                 return BI.createWidget({
                     type: v
diff --git a/demo/js/main.js b/demo/js/main.js
index 4062ecc69..0fa50a657 100644
--- a/demo/js/main.js
+++ b/demo/js/main.js
@@ -2,8 +2,23 @@ Demo.Main = BI.inherit(BI.Widget, {
     props: {
         baseCls: "demo-main bi-background"
     },
+
+    _store: function () {
+        return BI.Stores.getStore("demo.store.main");
+    },
+
+    watch: {
+        activeCard: function (v) {
+            this.center.setValue(v);
+        }
+    },
+
+    beforeInit: function (cb) {
+        this.store.init(cb);
+    },
+
     render: function () {
-        var center;
+        var self = this;
         return {
             type: "bi.border",
             items: {
@@ -14,7 +29,7 @@ Demo.Main = BI.inherit(BI.Widget, {
                         listeners: [{
                             eventName: Demo.North.EVENT_VALUE_CHANGE,
                             action: function (v) {
-                                center.setValue(v);
+                                self.store.handleTreeSelectChange(v);
                             }
                         }]
                     }
@@ -26,7 +41,7 @@ Demo.Main = BI.inherit(BI.Widget, {
                         listeners: [{
                             eventName: Demo.West.EVENT_VALUE_CHANGE,
                             action: function (v) {
-                                center.setValue(v);
+                                self.store.handleTreeSelectChange(v);
                             }
                         }]
                     }
@@ -35,7 +50,7 @@ Demo.Main = BI.inherit(BI.Widget, {
                     el: {
                         type: "demo.center",
                         ref: function (_ref) {
-                            center = _ref;
+                            self.center = _ref;
                         }
                     }
                 }
diff --git a/demo/js/main.store.js b/demo/js/main.store.js
new file mode 100644
index 000000000..34f3d3fc6
--- /dev/null
+++ b/demo/js/main.store.js
@@ -0,0 +1,65 @@
+!(function () {
+    var Store = BI.inherit(Fix.Model, {
+        _init: function () {
+
+        },
+
+        state: function () {
+            return {
+                activeCard: Demo.showIndex
+            };
+        },
+
+        computed: {},
+
+        watch: {},
+
+        actions: {
+            init: function (cb) {
+                var tree = BI.Tree.transformToTreeFormat(Demo.CONFIG);
+                var traversal = function (array, callback) {
+                    var t = [];
+                    BI.some(array, function (i, item) {
+                        var match = callback(i, item);
+                        if (match) {
+                            t.push(item.id);
+                        }
+                        var b = traversal(item.children, callback);
+                        if (BI.isNotEmptyArray(b)) {
+                            t = BI.concat([item.id], b);
+                        }
+                    });
+                    return t;
+                };
+                var paths = traversal(tree, function (index, node) {
+                    if (!node.children || BI.isEmptyArray(node.children)) {
+                        if (node.value === Demo.showIndex) {
+                            return true;
+                        }
+                    }
+                });
+                BI.each(Demo.CONFIG, function (index, item) {
+                    if (BI.contains(paths, item.id)) {
+                        item.open = true;
+                    }
+                });
+
+                cb();
+            },
+
+            handleTreeSelectChange: function (v) {
+                this.model.activeCard = v;
+                var matched = BI.some(Demo.CONFIG, function (index, item) {
+                    if (item.value === v) {
+                        BI.history.navigate(item.text, {trigger: true});
+                        return true;
+                    }
+                });
+                if (!matched) {
+                    BI.history.navigate("", {trigger: true});
+                }
+            }
+        }
+    });
+    BI.store("demo.store.main", Store);
+})();
\ No newline at end of file
diff --git a/demo/js/west.js b/demo/js/west.js
index e8c711190..2c68f3795 100644
--- a/demo/js/west.js
+++ b/demo/js/west.js
@@ -2,9 +2,11 @@ Demo.West = BI.inherit(BI.Widget, {
     props: {
         baseCls: "demo-west bi-border-right bi-card"
     },
+
     mounted: function () {
         this.searcher.setAdapter(this.tree);
     },
+
     render: function () {
         var self = this;
         return {
@@ -48,6 +50,7 @@ Demo.West = BI.inherit(BI.Widget, {
                         self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v);
                     }
                 }],
+                value: Demo.showIndex,
                 items: Demo.CONFIG,
                 ref: function (ref) {
                     self.tree = ref;