Use router for data display operation, add router to history view mount

client/src/components/History/Content/ContentItem.vue

@@ -186,7 +186,7 @@ export default {
                 };
             }
             return {
-                display: `/datasets/${id}/display/?preview=True`,
+                display: `/datasets/${id}/preview`,
                 edit: `/datasets/edit/${id}`,
                 showDetails: `/datasets/${id}/details`,
                 reportError: `/datasets/${id}/error`,
@@ -204,7 +204,7 @@ export default {
             }
         },
         onDisplay() {
-            iframeAdd({ path: this.itemUrls.display, title: this.name });
+            iframeAdd({ path: this.itemUrls.display, title: this.name, $router: this.$router });
         },
         onDragStart(evt) {
             evt.dataTransfer.dropEffect = "move";

client/src/components/History/mount.js

@@ -2,14 +2,23 @@
  * Endpoint for mounting History in non-Vue environment.
  */
 import Vue from "vue";
+import VueRouter from "vue-router";
 import HistoryView from "./HistoryView";
 import store from "store";
+import { safePath } from "utils/redirect";
+
+Vue.use(VueRouter);
 
 export const mountHistory = (el, propsData) => {
     const component = Vue.extend(HistoryView);
+    const router = new VueRouter();
+    router.push = function (url) {
+        window.location.href = safePath(url);
+    };
     return new component({
-        store: store,
-        propsData: propsData,
         el: el,
+        propsData: propsData,
+        router: router,
+        store: store,
     });
 };

client/src/entry/analysis/router.js

@@ -6,6 +6,7 @@ import { getGalaxyInstance } from "app";
 // these modules are mounted below the masthead.
 import Analysis from "entry/analysis/modules/Analysis";
 import Home from "entry/analysis/modules/Home";
+import CenterFrame from "entry/analysis/modules/CenterFrame";
 import Login from "entry/analysis/modules/Login";
 import WorkflowEditorModule from "entry/analysis/modules/WorkflowEditor";
 
@@ -131,6 +132,13 @@ export function getRouter(Galaxy) {
                         component: DatasetDetails,
                         props: true,
                     },
+                    {
+                        path: "datasets/:datasetId/preview",
+                        component: CenterFrame,
+                        props: (route) => ({
+                            src: `datasets/${route.params.datasetId}/display/?preview=True`,
+                        }),
+                    },
                     {
                         // legacy route, potentially used by 3rd parties
                         path: "datasets/:datasetId/show_params",

lib/galaxy/webapps/galaxy/buildapp.py

@@ -244,6 +244,7 @@ def app_pair(global_conf, load_app_kwds=None, wsgi_preflight=True, **kwargs):
     webapp.add_client_route("/datasets/edit")
     webapp.add_client_route("/datasets/{dataset_id}/error")
     webapp.add_client_route("/datasets/{dataset_id}/details")
+    webapp.add_client_route("/datasets/{dataset_id}/preview")
     webapp.add_client_route("/datasets/{dataset_id}/show_params")
     webapp.add_client_route("/collection/edit/{collection_id}")
     webapp.add_client_route("/jobs/{job_id}/view")