fix(vue-app, vue-renderer, utils): respect trailingSlash setting for payloads (#8489)

* fix(utils): don't inject a trailing slash on catchall routes (e.g. `/*/`)

closes #8488

* fix(vue-app, vue-renderer): respect `trailingSlash` setting for payloads

* refactor: use new ufo `parsePath` utility

Co-authored-by: pooya parsa <pyapar@gmail.com>

packages/utils/src/route.js

@@ -1,7 +1,7 @@
 import path from 'path'
 import get from 'lodash/get'
 import consola from 'consola'
-import { normalizeURL } from '@nuxt/ufo'
+import { normalizeURL, withTrailingSlash, withoutTrailingSlash } from '@nuxt/ufo'
 import { r } from './resolve'
 
 const routeChildren = function (route) {
@@ -209,7 +209,11 @@ export const createRoutes = function createRoutes ({
     })
     if (trailingSlash !== undefined) {
       route.pathToRegexpOptions = { ...route.pathToRegexpOptions, strict: true }
-      route.path = route.path.replace(/\/+$/, '') + (trailingSlash ? '/' : '') || '/'
+      if (trailingSlash && !route.path.endsWith('*')) {
+        route.path = withTrailingSlash(route.path)
+      } else {
+        route.path = withoutTrailingSlash(route.path) || '/'
+      }
     }
 
     parent.push(route)

packages/vue-app/template/App.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { parsePath, withoutTrailingSlash } from '@nuxt/ufo'
 <% utilsImports = [
   ...(features.asyncData || features.fetch) ? [
     'getMatchedComponentsInstances',
@@ -296,19 +297,23 @@ export default {
     <% } /* features.layouts */ %>
     <% if (isFullStatic) { %>
     getRouterBase() {
-      return (this.$router.options.base || '').replace(/\/+$/, '')
+      return withoutTrailingSlash(this.$router.options.base)
     },
     getRoutePath(route = '/') {
       const base = this.getRouterBase()
       if (base && route.startsWith(base)) {
         route = route.substr(base.length)
       }
-      return (route.replace(/\/+$/, '') || '/').split('?')[0].split('#')[0]
+      let path = parsePath(route).pathname
+      <% if (!nuxtOptions.router.trailingSlash) { %>
+        path = withoutTrailingSlash(path)
+      <% } %>
+      return path || '/'
     },
     getStaticAssetsPath(route = '/') {
       const { staticAssetsBase } = window.<%= globals.context %>
 
-      return urlJoin(staticAssetsBase, this.getRoutePath(route))
+      return urlJoin(staticAssetsBase, withoutTrailingSlash(this.getRoutePath(route)))
     },
     <% if (nuxtOptions.generate.manifest) { %>
       async fetchStaticManifest() {

packages/vue-renderer/src/renderers/ssr.js

@@ -4,6 +4,7 @@ import { format } from 'util'
 import fs from 'fs-extra'
 import consola from 'consola'
 import { TARGETS, urlJoin } from '@nuxt/utils'
+import { parsePath, withoutTrailingSlash } from '@nuxt/ufo'
 import devalue from '@nuxt/devalue'
 import { createBundleRenderer } from 'vue-server-renderer'
 import BaseRenderer from './base'
@@ -209,7 +210,10 @@ export default class SSRRenderer extends BaseRenderer {
         // Page level payload.js (async loaded for CSR)
         const payloadPath = urlJoin(url, 'payload.js')
         const payloadUrl = urlJoin(staticAssetsBase, payloadPath)
-        const routePath = (url.replace(/\/+$/, '') || '/').split('?')[0] // remove trailing slah and query params
+        let routePath = parsePath(url).pathname // remove query params
+        if (!this.options.router.trailingSlash) {
+          routePath = withoutTrailingSlash(routePath) || '/'
+        }
         const payloadScript = `__NUXT_JSONP__("${routePath}", ${devalue({ data, fetch, mutations })});`
         staticAssets.push({ path: payloadPath, src: payloadScript })
         preloadScripts.push(payloadUrl)