Support for trailing slash

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added phone validation helper (#4980)
 - Configurable enabling min & max price aggregations
 - Storing totals in localStorage to sync it between tabs ([#4733](https://github.com/vuestorefront/vue-storefront/issues/4733))
+- Support for trailing slashes in the route paths - @tdugue @gibkigonzo @Fifciu ([#5372](https://github.com/vuestorefront/vue-storefront/pull/5372))
 
 ### Fixed
 

core/lib/types.ts

@@ -1,10 +1,13 @@
+import { PathToRegexpOptions } from 'vue-router/types/router';
+
 export interface LocalizedRoute {
   path?: string,
   name?: string,
   hash?: string,
   params?: { [key: string]: unknown },
   fullPath?: string,
-  host?: string
+  host?: string,
+  pathToRegexpOptions?: PathToRegexpOptions
 }
 
 export interface StoreView {

core/modules/url/helpers/index.ts

@@ -20,8 +20,14 @@ function prepareDynamicRoute (routeData: LocalizedRoute, path: string): RouteCon
   const userRoute = RouterManager.findByName(routeData.name)
   if (userRoute) {
     const normalizedPath = `${path.startsWith('/') ? '' : '/'}${path}`
-    const dynamicRoute = Object.assign({}, userRoute, routeData, { path: normalizedPath, name: `urldispatcher-${normalizedPath}` })
-    return dynamicRoute
+
+    return {
+      ...userRoute,
+      ...routeData,
+      path: normalizedPath,
+      name: `urldispatcher-${normalizedPath}`,
+      pathToRegexpOptions: { strict: true }
+    }
   } else {
     Logger.error('Route not found ' + routeData['name'], 'dispatcher')()
     return null
@@ -54,10 +60,10 @@ export function findRouteByPath (path: string): RouteConfig {
   return RouterManager.findByPath(path)
 }
 
-export function normalizeUrlPath (url: string): string {
+export function normalizeUrlPath (url: string, clearTrailingSlash: boolean = true): string {
   if (url && url.length > 0) {
     if (url.length > 0 && !url.startsWith('/')) url = `/${url}`
-    if (url.endsWith('/')) url = url.slice(0, -1)
+    if (url.endsWith('/') && clearTrailingSlash) url = url.slice(0, -1)
     const queryPos = url.indexOf('?')
     if (queryPos > 0) url = url.slice(0, queryPos)
   }

core/modules/url/router/beforeEach.ts

@@ -5,7 +5,6 @@ import { Route } from 'vue-router'
 import store from '@vue-storefront/core/store'
 import { Logger } from '@vue-storefront/core/lib/logger'
 import { processDynamicRoute, normalizeUrlPath } from '../helpers'
-import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 import { LocalizedRoute } from '@vue-storefront/core/lib/types'
 import { RouterManager } from '@vue-storefront/core/lib/router-manager'
 import { routerHelper } from '@vue-storefront/core/helpers'
@@ -23,14 +22,13 @@ export async function beforeEachGuard (to: Route, from: Route, next) {
   }
   RouterManager.lockRoute()
 
-  const path = normalizeUrlPath(to.path)
+  const path = normalizeUrlPath(to.path, false)
   const hasRouteParams = to.hasOwnProperty('params') && Object.values(to.params).length > 0
   const isPreviouslyDispatchedDynamicRoute = to.matched.length > 0 && to.name && to.name.startsWith('urldispatcher')
   if (!to.matched.length || to.matched[0].name.endsWith('page-not-found') || (isPreviouslyDispatchedDynamicRoute && !hasRouteParams)) {
-    const storeCode = currentStoreView().storeCode
     try {
       const routeData = await UrlDispatchMapper(to)
-      if (routeData) {
+      if (routeData && !routeData.name.endsWith('page-not-found')) {
         let dynamicRoute: LocalizedRoute = processDynamicRoute(routeData, path, !isPreviouslyDispatchedDynamicRoute)
         if (dynamicRoute) {
           next({

core/modules/url/test/unit/helpers/preProcessDynamicRoutes.spec.ts

@@ -62,7 +62,10 @@ describe('preProcessDynamicRoutes helper', () => {
         params: {
           slug: 'all-2'
         },
-        path: '/all-2'
+        path: '/all-2',
+        pathToRegexpOptions: {
+          strict: true
+        }
       }
     ]
   })

core/modules/url/test/unit/helpers/processDynamicRoute.spec.ts

@@ -65,7 +65,10 @@ describe('parametrizeRouteData helper', () => {
       params: {
         slug: 'pants-18'
       },
-      path: '/men/bottoms-men/pants-men/pants-18'
+      path: '/men/bottoms-men/pants-men/pants-18',
+      pathToRegexpOptions: {
+        strict: true
+      }
     }
   })