Resolve "Some legacy pages apparently get build up/rendered twice"

Closes #841 (closed)

aleksis/core/frontend/components/LegacyBaseTemplate.vue

@@ -21,7 +21,7 @@
   </message-box>
   <iframe
     v-else
-    :src="'/django' + $route.path + queryString"
+    :src="iFrameSrc"
     :height="iFrameHeight + 'px'"
     class="iframe-fullsize"
     @load="load"
@@ -41,6 +41,7 @@ export default {
   data: function () {
     return {
       iFrameHeight: 0,
+      iFrameSrc: undefined,
     };
   },
   computed: {
@@ -53,13 +54,16 @@ export default {
     },
   },
   methods: {
+    getIFrameURL() {
+      const location = this.$refs.contentIFrame.contentWindow.location;
+      const url = new URL(location);
+      return url;
+    },
     /** Handle iframe data after inner page loaded */
     load() {
       // Write new location of iframe back to Vue Router
-      const location = this.$refs.contentIFrame.contentWindow.location;
-      const url = new URL(location);
-      const path = url.pathname.replace(/^\/django/, "");
-      const pathWithQueryString = path + encodeURI(url.search);
+      const path = this.getIFrameURL().pathname.replace(/^\/django/, "");
+      const pathWithQueryString = path + encodeURI(this.getIFrameURL().search);
       const routePath =
         path.charAt(path.length - 1) === "/" &&
         this.$route.path.charAt(path.length - 1) !== "/"
@@ -103,15 +107,33 @@ export default {
     },
   },
   watch: {
-    $route() {
+    $route(newRoute) {
       // Show loading animation once route changes
       this.$root.contentLoading = true;
 
+      // Only reload iFrame content when navigation comes from outsite the iFrame
+      const path = this.getIFrameURL().pathname.replace(/^\/django/, "");
+      const routePath =
+        path.charAt(path.length - 1) === "/" &&
+        newRoute.path.charAt(path.length - 1) !== "/"
+          ? newRoute.path + "/"
+          : newRoute.path;
+
+      if (path !== routePath) {
+        this.$refs.contentIFrame.contentWindow.location =
+          "/django" + this.$route.path + this.queryString;
+      } else {
+        this.$root.contentLoading = false;
+      }
+
       // Scroll to top only when route changes to not affect form submits etc.
       // A small duration to avoid flashing of the UI
       this.$vuetify.goTo(0, { duration: 10 });
     },
   },
+  mounted() {
+    this.iFrameSrc = "/django" + this.$route.path + this.queryString;
+  },
   name: "LegacyBaseTemplate",
 };
 </script>