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>
This commit is contained in:
Daniel Roe 2020-12-17 11:51:14 +00:00 committed by GitHub
parent 33143038b1
commit fb191d2fbd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 6 deletions

View File

@ -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)

View File

@ -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() {

View File

@ -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)