Remove custom VueRouter.resolve

replace and push both work  as intended. You can
specify a a full url  if you don't want to have the baseUrl
prepended. Better yet, if you're navigating within
the app it's better to specify a location.

The custom resolve was actually breakinging a huge
amount of links in the app which was caused 404s if a
user attempted to open a link in a new tab. Most things appeared to work presumably because vue-router
was handling the page switches instead of the browser.

rancher/dashboard#643

components/formatter/IngressTarget.vue

@@ -84,7 +84,7 @@ export default {
       const id = `${ this.namespace }/${ serviceName }`;
 
       return isTargetsWorkload
-        ? this.findWorkload(id)?.detailUrl || ''
+        ? this.findWorkload(id)?.detailLocation || ''
         : {
           resource:  SERVICE,
           id:        serviceName,

components/formatter/LinkDetail.vue

@@ -27,7 +27,7 @@ export default {
         return get(this.row, this.opts.reference);
       }
 
-      return this.row?.detailUrl;
+      return this.row?.detailLocation;
     },
   }
 };
@@ -35,8 +35,8 @@ export default {
 
 <template>
   <span>
-    <nuxt-link :to="to">
+    <n-link :to="to">
       {{ value }}
-    </nuxt-link>
+    </n-link>
   </span>
 </template>

components/formatter/LinkDetailImage.vue

@@ -20,7 +20,7 @@ export default {
 
 <template>
   <span>
-    <nuxt-link :to="row.detailUrl">
+    <nuxt-link :to="row.detailLocation">
       {{ value }}
     </nuxt-link>
     <br />

components/formatter/SecretType.vue

@@ -21,7 +21,7 @@ export default {
       const serviceAccount = await this.$store.dispatch('cluster/find', { type: SERVICE_ACCOUNT, id: this.value.serviceAccountID });
 
       if (serviceAccount) {
-        this.serviceAccountLink = serviceAccount.detailUrl;
+        this.serviceAccountLink = serviceAccount.detailLocation;
       }
     }
   }

models/app.js

@@ -1,16 +1,21 @@
-import { addParams } from '@/utils/url';
 import { MODE, _EDIT } from '@/config/query-params';
 
 export default {
   appEditUrl() {
-    return this.detailUrl();
+    return this.detailLocation;
   },
 
   goToEdit() {
     return (moreQuery = {}) => {
-      const url = addParams(this.appEditUrl, { [MODE]: _EDIT, ...moreQuery });
+      const location = this.appEditUrl;
 
-      this.currentRouter().push({ path: url });
+      location.query = {
+        ...location.query,
+        [MODE]: _EDIT,
+        ...moreQuery
+      };
+
+      this.currentRouter().push(location);
     };
   },
 };

models/apps/rancher-gatekeeper-operator.js

@@ -1,5 +1,4 @@
 import { MODE, _CREATE } from '@/config/query-params';
-import { addParams } from '@/utils/url';
 import { GATEKEEPER_CONSTRAINT_TEMPLATE } from '@/config/types';
 import { downloadFile } from '@/utils/download';
 
@@ -45,25 +44,30 @@ export default {
 
   goToAddConstraint() {
     return (moreQuery = {}) => {
-      const constraintUrl = this.currentRouter().resolve({ name: 'c-cluster-gatekeeper-constraints-create' }).href;
-      const url = addParams(constraintUrl, {
-        [MODE]:   _CREATE,
-        ...moreQuery
-      });
+      const location = {
+        name:  'c-cluster-gatekeeper-constraints-create',
+        query: {
+          [MODE]:   _CREATE,
+          ...moreQuery
+        }
+      };
 
-      this.currentRouter().push({ path: url });
+      this.currentRouter().push(location);
     };
   },
 
   goToAddTemplate() {
     return (moreQuery = {}) => {
-      const constraintUrl = this.currentRouter().resolve({ name: 'c-cluster-resource-create', params: { resource: GATEKEEPER_CONSTRAINT_TEMPLATE } }).href;
-      const url = addParams(constraintUrl, {
-        [MODE]:   _CREATE,
-        ...moreQuery
-      });
+      const location = {
+        name:   'c-cluster-resource-create',
+        params: { resource: GATEKEEPER_CONSTRAINT_TEMPLATE },
+        query:  {
+          [MODE]:   _CREATE,
+          ...moreQuery
+        }
+      };
 
-      this.currentRouter().push({ path: url });
+      this.currentRouter().push(location);
     };
   },
 

models/rio.cattle.io.service.js

@@ -5,7 +5,6 @@ import {
 } from '@/config/query-params';
 import { escapeHtml } from '@/utils/string';
 import { DATE_FORMAT, TIME_FORMAT } from '@/store/prefs';
-import { addParams } from '@/utils/url';
 import { PRIVATE } from '@/plugins/steve/resource-proxy';
 import { RIO } from '@/config/types';
 import { formatSi } from '@/utils/units';
@@ -411,15 +410,16 @@ export default {
   },
 
   goToStage() {
-    const router = this.currentRouter();
-
     return (moreQuery = {}) => {
-      const url = addParams(this.detailUrl, {
+      const location = this.detailLocation;
+
+      location.query = {
+        ...location.query,
         [MODE]:  _STAGE,
         ...moreQuery
-      });
+      };
 
-      router.push({ path: url });
+      this.currentRouter().push(location);
     };
   },
 

plugins/extend-router.js

@@ -1,20 +1,6 @@
 import VueRouter from 'vue-router';
 import { isEqual } from 'lodash';
 
-const _resolve = VueRouter.prototype.resolve;
-
-// Resolve returns URLs that include the base URL, which then gets added again
-// by router.replace or router.push.  So don't do that.
-VueRouter.prototype.resolve = function() {
-  const out = _resolve.apply(this, arguments);
-
-  if ( this.options.base ) {
-    out.href = out.href.substr(this.options.base.length).replace(/^\/*/, '/');
-  }
-
-  return out;
-};
-
 VueRouter.prototype.applyQuery = function(qp, defaults = {}) {
   const query = queryParamsFor(this.currentRoute.query, qp, defaults);
 

plugins/steve/resource-instance.js

@@ -9,7 +9,6 @@ import {
 } from '@/config/query-params';
 import { findBy } from '@/utils/array';
 import { DEV } from '@/store/prefs';
-import { addParams } from '@/utils/url';
 import { DESCRIPTION } from '@/config/labels-annotations';
 
 const REMAP_STATE = { disabled: 'inactive' };
@@ -657,76 +656,73 @@ export default {
     };
   },
 
-  detailUrl() {
-    const router = this.currentRouter();
+  detailLocation() {
     const schema = this.$getters['schemaFor'](this.type);
 
-    const route = `c-cluster-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`;
-
-    const params = {
-      resource:  this.type,
-      namespace: this.metadata && this.metadata.namespace,
-      id:        this.metadata.name
-    };
-
-    const url = router.resolve({
-      name:   route,
-      params,
-    }).href;
-
-    return url;
-  },
-
-  goToClone() {
-    return (moreQuery = {}) => {
-      const url = addParams(this.detailUrl, {
-        [MODE]:  _CLONE,
-        ...moreQuery
-      });
-
-      this.currentRouter().push({ path: url });
+    return {
+      name:   `c-cluster-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`,
+      params: {
+        resource:  this.type,
+        namespace: this.metadata && this.metadata.namespace,
+        id:        this.metadata.name
+      }
     };
   },
 
   goToEdit() {
     return (moreQuery = {}) => {
-      const url = addParams(this.detailUrl, { [MODE]: _EDIT, ...moreQuery });
+      const location = this.detailLocation;
 
-      this.currentRouter().push({ path: url });
+      location.query = {
+        ...location.query,
+        [MODE]: _EDIT,
+        ...moreQuery
+      };
+
+      this.currentRouter().push(location);
     };
   },
 
   goToEditYaml() {
     return () => {
-      const url = addParams(this.detailUrl, {
+      const location = this.detailLocation;
+
+      location.query = {
+        ...location.query,
         [MODE]:      _EDIT,
         [AS_YAML]: _FLAGGED
-      });
+      };
 
-      this.currentRouter().push({ path: url });
+      this.currentRouter().push(location);
     };
   },
 
   goToViewYaml() {
     return () => {
-      const url = addParams(this.detailUrl, {
+      const location = this.detailLocation;
+
+      location.query = {
+        ...location.query,
         [MODE]:      _VIEW,
         [AS_YAML]: _FLAGGED
-      });
+      };
 
-      this.currentRouter().push({ path: url });
+      this.currentRouter().push(location);
     };
   },
 
   cloneYaml() {
     return (moreQuery = {}) => {
-      const url = addParams(this.detailUrl, {
+      const location = this.detailLocation;
+
+      location.query = {
+        ...location.query,
         [MODE]:      _CLONE,
         [AS_YAML]: _FLAGGED,
         ...moreQuery
-      });
+      };
 
-      this.currentRouter().push({ path: url });
+      this.currentRouter().push(location);
     };
   },