Use PageRouter instead of page stack. Start implementing first add page.

src/contents/ui/main.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.6
+import QtQuick 2.9
-import org.kde.kirigami 2.6 as Kirigami
+import org.kde.kirigami 2.12 as Kirigami
-import QtQuick.Controls 2.0 as Controls
+import QtQuick.Controls 2.9 as Controls
 import QtQuick.Layouts 1.12 as Layouts
 
 Kirigami.ApplicationWindow {
@@ -8,26 +8,122 @@ Kirigami.ApplicationWindow {
 
     title: "Vehicle Voyage"
 
+    Kirigami.PageRouter {
+        id: router
+        initialRoute: "main"
+        pageStack: root.pageStack.columnView
         
-    pageStack.initialPage: mainPageComponent
+        Kirigami.PageRoute {
-    contextDrawer: Kirigami.ContextDrawer {}
+            name: "main"
+            Component {
+                Kirigami.Page {
+                    id: mainPage
+                    mainAction: Kirigami.Action {
+                        text: qsTr("Add Vehicle")
+                        onTriggered: {
+                            router.navigateToRoute(["main","addvehicle"]);
+                        }
+                    }
+                    contextualActions: [
+                        Kirigami.Action {
+                            iconName: "help-about"
+                            text: qsTr("About")
+                            onTriggered: {
+                                router.navigateToRoute("about");
+                            }
+                        }
+                    ]
+                    title: "Vehicles"
                     
-    Component {
+                    Kirigami.CardsListView {
-        id: mainPageComponent
+                            Layouts.Layout.fillWidth: true
-
+                            Layouts.Layout.fillHeight: true
-        Kirigami.Page {
+                            id: vehicleView
-            id: mainPage
+                            model: vehicleModel
-            contextualActions: [
+                            delegate: Kirigami.Card {
-                Kirigami.Action {
+                                id: card
-                    iconName: "help-about"
+                                banner {
-                    text: qsTr("About")
+                                    title: name
-                    onTriggered: {
+                                }
-                        pageStack.replace(aboutPageComponent);
+                            }
+                            Controls.ScrollBar.vertical: Controls.ScrollBar {}
                     }
                 }
-            ]
+            }
-            title: "Vehicles"
         }
+    
+        Kirigami.PageRoute {
+            name: "about"
+            Component {
+                Kirigami.AboutPage {
+                    id: aboutPage
+                    actions.main: Kirigami.Action {
+                        iconName: "window-close"
+                        text: qsTr("Close")
+                        onTriggered: {
+                            router.navigateToRoute("main");
+                        }
+                    }
+                    aboutData: appAboutData
+                }
+            }
+        }
+        
+        Kirigami.PageRoute {
+            name: "addvehicle"
+            Component {
+                Kirigami.Page {
+                    title: qsTr("Add Vehicle")
+                    Layouts.ColumnLayout {
+                        anchors.fill: parent
+                        Layouts.RowLayout {
+                            Controls.Label {
+                                text: qsTr("Name")+":"
+                            }
+                            Controls.TextField {
+                                //
+                            }
+                        }
+                        Layouts.RowLayout {
+                            Controls.Label {
+                                text: qsTr("Make")+":"
+                            }
+                            Controls.TextField {
+                                //
+                            }
+                        }
+                        Layouts.RowLayout {
+                            Controls.Label {
+                                text: qsTr("Model")+":"
+                            }
+                            Controls.TextField {
+                                //
+                            }
+                        }
+                        Layouts.RowLayout {
+                            Controls.Label {
+                                text: qsTr("Year")+":"
+                            }
+                            Controls.TextField {
+                                inputMethodHints: Qt.ImhDigitsOnly
+                                validator: IntValidator {
+                                    bottom: 1900
+                                    top: 4000
+                                }
+                            }
+                        }
+                        Controls.Button {
+                            text: qsTr("Add")
+                            highlighted: true
+                            onClicked: {
+                                router.popRoute();
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
         /*Kirigami.Page {
             id: mainPage
             mainAction: Kirigami.Action {
@@ -249,21 +345,4 @@ Kirigami.ApplicationWindow {
                 }
             }
         }*/
-    }
-    
-    Component {
-        id:aboutPageComponent
-        Kirigami.AboutPage {
-            id: aboutPage
-            actions.main: Kirigami.Action {
-                iconName: "window-close"
-                text: qsTr("Close")
-                onTriggered: {
-                    pageStack.clear();
-                    pageStack.push(mainPageComponent);
-                }
-            }
-            aboutData: appAboutData
-        }
-    }
 }