diff --git a/README.md b/README.md
index 01d00c7d9..cf2417b3c 100644
--- a/README.md
+++ b/README.md
@@ -226,7 +226,7 @@ By default, this plugins checks the folder at `src/pages` for any `.vue` files a
Let's take a look at a simple example:
-```
+```text
src/pages/
├── index.vue
├── about.vue
@@ -255,7 +255,7 @@ Nested routes are automatically defined by defining a `.vue` file alongside a fo
In other words, given this folder structure:
-```
+```text
src/pages/
├── users/
│ └── index.vue
@@ -290,13 +290,13 @@ const routes = [
]
```
-Note `users/` could be any valid route like `my-[id]-param/`.
+Note the folder and file's name `users/` could be any valid naming like `my-[id]-param/`.
#### Nested routes without nesting layouts
Sometimes you might want to add _nesting to the URL_ in the form of slashes but you don't want it to impact your UI hierarchy. Consider the following folder structure:
-```
+```text
src/pages/
├── users/
│ ├── [id].vue
@@ -351,7 +351,7 @@ VueRouter({
})
```
-You can also provide a path prefix for each of these folders, it will be used _as is_, and can therefor **not end in a `/`** and even contain any params you want:
+You can also provide a path prefix for each of these folders, it will be used _as is_, and **cannot start with a `/`** but can contain any params you want or even **not finish with a `/`**:
```js
VueRouter({
@@ -361,21 +361,25 @@ VueRouter({
src: 'src/admin/routes',
// note there is always a trailing slash and never a leading one
path: 'admin/',
+ // src/admin/routes/dashboard.vue -> /admin/dashboard
},
{
src: 'src/docs',
+ // you can add parameters
path: 'docs/:lang/',
+ // src/docs/introduction.vue -> /docs/:lang/introduction
},
{
src: 'src/promos',
- // produces paths like /promos-some-file-name
+ // you can omit the trailing slash
path: 'promos-',
+ // src/promos/black-friday.vue -> /promos-black-friday
},
],
})
```
-Note that the provided folders must be separate and one _route folder_ cannot contain another specified _route folder_.
+Note that the provided folders must be separate and one _route folder_ cannot contain another specified _route folder_. If you need further customization, give [definePage()](#definepage-in-script) a try.
## TypeScript
@@ -447,15 +451,16 @@ The `RouterLocationResolved` type exposed by `vue-router/auto` allows passing a
```
-This type corresponds to the return type of `router.resolve()`.
+This type is also the return type of `router.resolve()`.
-You have the same equivalents for `RouterLocation`, `RouterLocationNormalized`, and `RouterLocationNormalizedLoaded`. All of them exist in `vue-router` but the one exposed by `vue-router/auto` accept a generic:
+You have the same equivalents for `RouterLocation`, `RouterLocationNormalized`, and `RouterLocationNormalizedLoaded`. All of them exist in `vue-router` but `vue-router/auto` override them to provide a type safe version of them. In addition to that, you can pass the name of the route as a generic:
```ts
// these are all valid
let userWithId: RouterLocationNormalizedLoaded<'/users/[id]'> = useRoute()
userWithId = useRoute<'/users/[id]'>()
-userWithId = useRoute('/users/[id]') // 👈 this one is the easiest to write
+// 👇 this one is the easiest to write because it autocomplete
+userWithId = useRoute('/users/[id]')
```
## Named views
@@ -475,6 +480,25 @@ Note that by default a non named route is named `default` and that you don't nee
## Extending existing routes
+### `definePage()` in `
+```
+
+Note you cannot use variables in `definePage()` as its passed parameter gets extracted at build time and is removed from `