diff --git a/doric-Qt/example/app/demo/DoricDemoBridge.cpp b/doric-Qt/example/app/demo/DoricDemoBridge.cpp
index 14757786..9e93cb5a 100644
--- a/doric-Qt/example/app/demo/DoricDemoBridge.cpp
+++ b/doric-Qt/example/app/demo/DoricDemoBridge.cpp
@@ -37,83 +37,9 @@ DoricDemoBridge::DoricDemoBridge(QQmlApplicationEngine *engine, QObject *parent)
   context->setContextProperty("draggableBridge", draggableBridge);
 }
 
-void DoricDemoBridge::navigate(QVariant path, QVariant index) {
-  QString name;
-  switch (index.toInt()) {
-  case 0:
-    name = "ComponetDemo.js";
-    break;
-  case 1:
-    name = "Counter.js";
-    break;
-  case 2:
-    name = "DraggableDemo.js";
-    break;
-  case 3:
-    name = "EffectsDemo.js";
-    break;
-  case 4:
-    name = "FlexDemo.js";
-    break;
-  case 5:
-    name = "Gobang.js";
-    break;
-  case 6:
-    name = "ImageDemo.js";
-    break;
-  case 7:
-    name = "InputDemo.js";
-    break;
-  case 8:
-    name = "LayoutDemo.js";
-    break;
-  case 9:
-    name = "LayoutTestDemo.js";
-    break;
-  case 10:
-    name = "ModalDemo.js";
-    break;
-  case 11:
-    name = "ModularDemo.js";
-    break;
-  case 12:
-    name = "NavigatorDemo.js";
-    break;
-  case 13:
-    name = "NetworkDemo.js";
-    break;
-  case 14:
-    name = "NotificationDemo.js";
-    break;
-  case 15:
-    name = "PopoverDemo.js";
-    break;
-  case 16:
-    name = "ScrollerDemo.js";
-    break;
-  case 17:
-    name = "SimpleDemo.js";
-    break;
-  case 18:
-    name = "SliderDemo.js";
-    break;
-  case 19:
-    name = "Snake.js";
-    break;
-  case 20:
-    name = "StorageDemo.js";
-    break;
-  case 21:
-    name = "SwitchDemo.js";
-    break;
-  case 22:
-    name = "TextDemo.js";
-    break;
-  }
-
-  QString resourcePath = path.toString();
+void DoricDemoBridge::navigate(QVariant source, QVariant alias) {
   std::shared_ptr<DoricAsyncResult> asyncResult =
-      DoricJSLoaderManager::getInstance()->request(resourcePath + name);
+      DoricJSLoaderManager::getInstance()->request(source.toString());
 
   QString script = asyncResult->getResult();
 
@@ -125,7 +51,7 @@ void DoricDemoBridge::navigate(QVariant path, QVariant index) {
   DoricPanel *panel = new DoricPanel(mEngine, quickItem);
   quickItem->setWidth(600);
   quickItem->setHeight(800);
-  panel->config(script, name, NULL);
+  panel->config(script, alias.toString(), NULL);
 
   QObject *window = mEngine->rootObjects().at(0);
   QVariant arg = QVariant::fromValue(object);
diff --git a/doric-Qt/example/app/demo/DoricDemoBridge.h b/doric-Qt/example/app/demo/DoricDemoBridge.h
index a1a2389a..7b3b9835 100644
--- a/doric-Qt/example/app/demo/DoricDemoBridge.h
+++ b/doric-Qt/example/app/demo/DoricDemoBridge.h
@@ -11,7 +11,7 @@ public:
                            QObject *parent = nullptr);
 
   Q_INVOKABLE
-  void navigate(QVariant path, QVariant index);
+  void navigate(QVariant source, QVariant alias);
 
 private:
   QQmlApplicationEngine *mEngine;
diff --git a/doric-Qt/example/app/main.qml b/doric-Qt/example/app/main.qml
index 453dc8bb..18d6a34f 100644
--- a/doric-Qt/example/app/main.qml
+++ b/doric-Qt/example/app/main.qml
@@ -83,63 +83,68 @@ ApplicationWindow {
                     ScrollBar.vertical.policy: ScrollBar.AlwaysOff
 
                     ListView {
+                        id: list
                         width: parent.width
                         model: 23
                         boundsBehavior: Flickable.StopAtBounds
 
+                        function getSource(index) : string {
+                            switch (index) {
+                                case 0:
+                                    return "ComponetDemo.js"
+                                case 1:
+                                    return "Counter.js"
+                                case 2:
+                                    return "DraggableDemo.js"
+                                case 3:
+                                    return "EffectsDemo.js"
+                                case 4:
+                                    return "FlexDemo.js"
+                                case 5:
+                                    return "Gobang.js"
+                                case 6:
+                                    return "ImageDemo.js"
+                                case 7:
+                                    return "InputDemo.js"
+                                case 8:
+                                    return "LayoutDemo.js"
+                                case 9:
+                                    return "LayoutTestDemo.js"
+                                case 10:
+                                    return "ModalDemo.js"
+                                case 11:
+                                    return "ModularDemo.js"
+                                case 12:
+                                    return "NavigatorDemo.js"
+                                case 13:
+                                    return "NetworkDemo.js"
+                                case 14:
+                                    return "NotificationDemo.js"
+                                case 15:
+                                    return "PopoverDemo.js"
+                                case 16:
+                                    return "ScrollerDemo.js"
+                                case 17:
+                                    return "SimpleDemo.js"
+                                case 18:
+                                    return "SliderDemo.js"
+                                case 19:
+                                    return "Snake.js"
+                                case 20:
+                                    return "StorageDemo.js"
+                                case 21:
+                                    return "SwitchDemo.js"
+                                case 22:
+                                    return "TextDemo.js"
+                            }
+                        }
+
                         delegate: Rectangle {
                             Column {
                                 anchors.centerIn: parent
                                 Text {
                                     text: {
-                                        switch (index) {
-                                            case 0:
-                                                return "ComponetDemo.js"
-                                            case 1:
-                                                return "Counter.js"
-                                            case 2:
-                                                return "DraggableDemo.js"
-                                            case 3:
-                                                return "EffectsDemo.js"
-                                            case 4:
-                                                return "FlexDemo.js"
-                                            case 5:
-                                                return "Gobang.js"
-                                            case 6:
-                                                return "ImageDemo.js"
-                                            case 7:
-                                                return "InputDemo.js"
-                                            case 8:
-                                                return "LayoutDemo.js"
-                                            case 9:
-                                                return "LayoutTestDemo.js"
-                                            case 10:
-                                                return "ModalDemo.js"
-                                            case 11:
-                                                return "ModularDemo.js"
-                                            case 12:
-                                                return "NavigatorDemo.js"
-                                            case 13:
-                                                return "NetworkDemo.js"
-                                            case 14:
-                                                return "NotificationDemo.js"
-                                            case 15:
-                                                return "PopoverDemo.js"
-                                            case 16:
-                                                return "ScrollerDemo.js"
-                                            case 17:
-                                                return "SimpleDemo.js"
-                                            case 18:
-                                                return "SliderDemo.js"
-                                            case 19:
-                                                return "Snake.js"
-                                            case 20:
-                                                return "StorageDemo.js"
-                                            case 21:
-                                                return "SwitchDemo.js"
-                                            case 22:
-                                                return "TextDemo.js"
-                                        }
+                                        return list.getSource(index)
                                     }
                                 }
                             }
@@ -148,7 +153,8 @@ ApplicationWindow {
                             MouseArea {
                                 anchors.fill: parent
                                 onClicked: {
-                                    demoBridge.navigate("assets://src/", index)
+                                    let source = list.getSource(index)
+                                    demoBridge.navigate("assets://src/" + source, source)
                                 }
                             }
                         }