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

src/contents/ui/main.qml

@@ -1,33 +1,129 @@
-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 {
     id: root
 
     title: "Vehicle Voyage"
-    
 
-    pageStack.initialPage: mainPageComponent
+    Kirigami.PageRouter {
-    contextDrawer: Kirigami.ContextDrawer {}
+        id: router
-
+        initialRoute: "main"
-    Component {
+        pageStack: root.pageStack.columnView
-        id: mainPageComponent
+        
-
+        Kirigami.PageRoute {
-        Kirigami.Page {
+            name: "main"
-            id: mainPage
+            Component {
-            contextualActions: [
+                Kirigami.Page {
-                Kirigami.Action {
+                    id: mainPage
-                    iconName: "help-about"
+                    mainAction: Kirigami.Action {
-                    text: qsTr("About")
+                        text: qsTr("Add Vehicle")
-                    onTriggered: {
+                        onTriggered: {
-                        pageStack.replace(aboutPageComponent);
+                            router.navigateToRoute(["main","addvehicle"]);
+                        }
+                    }
+                    contextualActions: [
+                        Kirigami.Action {
+                            iconName: "help-about"
+                            text: qsTr("About")
+                            onTriggered: {
+                                router.navigateToRoute("about");
+                            }
+                        }
+                    ]
+                    title: "Vehicles"
+                    
+                    Kirigami.CardsListView {
+                            Layouts.Layout.fillWidth: true
+                            Layouts.Layout.fillHeight: true
+                            id: vehicleView
+                            model: vehicleModel
+                            delegate: Kirigami.Card {
+                                id: card
+                                banner {
+                                    title: name
+                                }
+                            }
+                            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
-        }
-    }
 }