Adapting page components for a SPA

Modules/Page/Assets/js/components/PageForm.vue

@@ -136,8 +136,6 @@
         mixins: [Translate, Slugify],
         props: {
             locales: {default: null},
-            pageId: {default: null},
-            route: {default: null},
         },
         data() {
             return {
@@ -171,14 +169,15 @@
             onSubmit() {
                 this.form = new Form(_.merge(this.page, {tags: this.tags}));
                 this.loading = true;
-                this.form.post(this.route)
+
+                this.form.post(this.getRoute())
                     .then(response => {
                         this.loading = false;
                         this.$message({
                             type: 'success',
                             message: response.message
                         });
-                        window.location = route('admin.page.page.index');
+                        this.$router.push({name: 'admin.page.page.index'});
                     })
                     .catch(error => {
                         console.log(error);
@@ -190,7 +189,7 @@
                     });
             },
             onCancel() {
-                window.location = route('admin.page.page.index');
+                this.$router.push({name: 'admin.page.page.index'});
             },
             fetchTemplates() {
                 axios.get(route('api.page.page-templates.index'))
@@ -205,7 +204,7 @@
                 this.tags = tags;
             },
             fetchPage() {
-                axios.post(route('api.page.page.find', {page: this.pageId}))
+                axios.post(route('api.page.page.find', {page: this.$route.params.pageId}))
                     .then(response => {
                         this.page = response.data.data;
                         this.tags = response.data.data.tags;
@@ -213,10 +212,17 @@
                     .catch(error => {
                     })
             },
+            getRoute() {
+                if (this.$route.params.pageId !== undefined) {
+                    return route('api.page.page.update', {page: this.$route.params.pageId});
+                }
+                return route('api.page.page.store');
+            },
         },
         mounted() {
             this.fetchTemplates();
-            if (this.pageId !== null) {
+
+            if (this.$route.params.pageId !== null) {
                 this.fetchPage();
             }
         }

Modules/Page/Assets/js/components/PageTable.vue

 <template>
-    <data-tables :data="data" :actions-def="actionsDef">
-        <el-table-column prop="id" label="Id" width="100">
-        </el-table-column>
-        <el-table-column prop="title" :label="translate('page', 'title')">
-        </el-table-column>
-        <el-table-column prop="slug" label="Slug">
-        </el-table-column>
-        <el-table-column prop="created_at" label="Created at">
-        </el-table-column>
-        <el-table-column fixed="right" prop="actions" label="Actions">
-            <template scope="scope">
-                <a class="btn btn-default btn-flat" @click.prevent="goToEdit(scope)"><i class="fa fa-pencil"></i></a>
+    <div class="row">
+        <div class="col-xs-12">
+            <div class="box box-primary">
+                <div class="box-body">
 
-                <delete-button :scope="scope" :rows="data" :translations="translations">
-                </delete-button>
-            </template>
-        </el-table-column>
-    </data-tables>
+                    <data-tables :data="data" :actions-def="actionsDef">
+                        <el-table-column prop="id" label="Id" width="100">
+                        </el-table-column>
+                        <el-table-column prop="title" :label="translate('page', 'title')">
+                        </el-table-column>
+                        <el-table-column prop="slug" label="Slug">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="Created at">
+                        </el-table-column>
+                        <el-table-column fixed="right" prop="actions" label="Actions">
+                            <template scope="scope">
+                                <a class="btn btn-default btn-flat" @click.prevent="goToEdit(scope)"><i
+                                        class="fa fa-pencil"></i></a>
+
+                                <delete-button :scope="scope" :rows="data" :translations="translations">
+                                </delete-button>
+                            </template>
+                        </el-table-column>
+                    </data-tables>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
     import axios from 'axios'
     import Translate from '../../../../Core/Assets/js/mixins/Translate'
+
     let data;
 
     export default {
@@ -34,7 +45,7 @@
                         name: this.translate('page', 'create page'),
                         icon: 'edit',
                         handler: () => {
-                            window.location = route('admin.page.page.create');
+                            this.$router.push({name: 'admin.page.page.create'})
                         }
                     }]
                 }
@@ -49,7 +60,7 @@
                     });
             },
             goToEdit(scope) {
-                window.location = scope.row.urls.edit_url;
+                this.$router.push({name: 'admin.page.page.edit', params: {pageId: scope.row.id}})
             },
         },
         mounted() {