Use the correct back link

Author: johnsimons

src/Frontend/src/components/messages2/FlowDiagram.vue

@@ -9,7 +9,7 @@ import { ControlButton, Controls } from "@vue-flow/controls";
 import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
-import { useRoute } from "vue-router";
+import { useRouter } from "vue-router";
 import EndpointDetails from "@/resources/EndpointDetails.ts";
 import { hexToCSSFilter } from "hex-to-css-filter";
 import TextEllipses from "@/components/TextEllipses.vue";
@@ -46,7 +46,6 @@ const nodeSpacingY = 200;
 
 const store = useMessageStore();
 const { state } = storeToRefs(store);
-const route = useRoute();
 
 async function getConversation(conversationId: string) {
   await store.loadConversation(conversationId);
@@ -162,8 +161,14 @@ function constructEdges(mappedMessages: MappedMessage[]): DefaultEdge[] {
 }
 
 const elements = ref<(Node | DefaultEdge)[]>([]);
+const backLink = ref<string>(routeLinks.failedMessage.failedMessages.link);
 
 onMounted(async () => {
+  const back = useRouter().currentRoute.value.query.back as string;
+  if (back) {
+    backLink.value = back;
+  }
+
   if (!state.value.data.conversation_id) return;
 
   const messages = await getConversation(state.value.data.conversation_id);
@@ -229,8 +234,8 @@ const greenColor = hexToCSSFilter("#00c468").filter;
             <i class="fa" :class="typeIcon(data.type)" v-tippy="data.type" />
             <div class="lead">
               <strong>
-                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(data.id), query: { back: route.path } }"><TextEllipses style="width: 204px" :text="data.nodeName" ellipses-style="LeftSide" /></RouterLink>
-                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, data.id), query: { back: route.path } }"><TextEllipses style="width: 204px" :text="data.nodeName" ellipses-style="LeftSide" /></RouterLink>
+                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(data.id), query: { back: backLink } }"><TextEllipses style="width: 204px" :text="data.nodeName" ellipses-style="LeftSide" /></RouterLink>
+                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, data.id), query: { back: backLink } }"><TextEllipses style="width: 204px" :text="data.nodeName" ellipses-style="LeftSide" /></RouterLink>
               </strong>
             </div>
             <div class="time-sent">