From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 16 Oct 2020 07:39:56 +0000 (+0200)
Subject: docs: add removal of unnamed params
X-Git-Tag: v4.0.0-rc.1~23
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=3ff41793cced89d01f79946346d89a23e0f1e0c3;p=thirdparty%2Fvuejs%2Frouter.git

docs: add removal of unnamed params
---

diff --git a/docs/guide/migration/index.md b/docs/guide/migration/index.md
index 33dd30f0..afc4c71e 100644
--- a/docs/guide/migration/index.md
+++ b/docs/guide/migration/index.md
@@ -252,6 +252,18 @@ const parent = this.$route.matched[this.$route.matched.length - 2]
 
 The `pathToRegexpOptions` and `caseSensitive` properties of route records have been replaced with `sensitive` and `strict` options for `createRouter()`. They can now also be directly passed when creating the router with `createRouter()`. Any other option specific to `path-to-regexp` has been removed as `path-to-regexp` is no longer used to parse paths.
 
+### Removal of unnamed parameters
+
+Due to the removal of `path-to-regexp`, unnamed parameters are no longer supported:
+
+- `/foo(/foo)?/suffix` becomes `/foo/:_(foo)?/suffix`
+- `/foo(foo)?` becomes `/foo:_(foo)?`
+- `/foo/(.*)` becomes `/foo/:_(.*)`
+
+:::tip
+Note you can use any name instead of `_` for the param. The point is to provide one.
+:::
+
 ### Usage of `history.state`
 
 Vue Router saves information on the `history.state`. If you have any code manually calling `history.pushState()`, you should likely avoid it or refactor it with a regular `router.push()` and a `history.replaceState()`:
diff --git a/playground/router.ts b/playground/router.ts
index 9a2a32b7..a98dddce 100644
--- a/playground/router.ts
+++ b/playground/router.ts
@@ -37,6 +37,7 @@ export const router = createRouter({
     },
     { path: '/users/:id', name: 'user', component: User, props: true },
     { path: '/documents/:id', name: 'docs', component: User, props: true },
+    { path: '/optional/:id?', name: 'optional', component: User, props: true },
     { path: encodeURI('/n/€'), name: 'euro', component },
     { path: '/n/:n', name: 'increment', component },
     { path: '/multiple/:a/:b', name: 'multiple', component },