router icon indicating copy to clipboard operation
router copied to clipboard

Fix: do not encode slashes in catch-all routes

Open ll3006 opened this issue 1 year ago • 1 comments

This fixes #1638

Encoding of the parameters is now done by the matcher and is dependend on the matcher keys: every key has a keepSlash property that reflects if it should encode the slash character or not.

The keepSlash currently applies to all custom regex that either match a slash or contain one in their literal part, excluding lookaheads, lookbehinds and negative ranges. This is very simplistic but should be enough to cover both catch-all (e.g. "(.*)" routes) and explicit path regexes (e.g. "(deep/path/[a-z]*/)" )

I have also added a few tests to ensure everyting is working properly.

The Router > 'can redirect to a star route when encoding the param' test is currently failing as it sets a parameter with an urlencoded slash (%2F) and expects to find it as it is in the route. However, since this PR allows literal slashes in star routes, the actual url contains the sequence as a literal (%252F) rather than keeping the escaped slash.

I could edit the test, but I am unsure if this is behaivour that is being relied upon. In case it is, more work is needed to distinguish user-set urlencoded path segments from the normal usecase.

To test this PR I have updated the sandbox from #1638 here: codesandbox.io

ll3006 avatar Jul 04 '24 08:07 ll3006

Deploy Preview for vue-router ready!

Name Link
Latest commit e683d7e3aad71355f0b5094a634ba81eed1c5984
Latest deploy log https://app.netlify.com/sites/vue-router/deploys/6748ffcd441bb400085effc2
Deploy Preview https://deploy-preview-2291--vue-router.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

Lighthouse
1 paths audited
Performance: 95 (🔴 down 1 from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (🟢 up 8 from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Jul 04 '24 08:07 netlify[bot]