From 3355ba2050a58ded39738e75d7fe69225d2f2e7f Mon Sep 17 00:00:00 2001 From: Nemanja Malesija Date: Tue, 14 Jan 2025 20:59:28 +0100 Subject: [PATCH 01/14] Update file-based-routing.md --- docs/guide/file-based-routing.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index 0adf551b6..d86db6a41 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -109,6 +109,29 @@ const routes = [ All generated routes that have a `component` property will have a `name` property. This avoid accidentally directing your users to a parent route. By default, names are generated using the file path, but you can override this behavior by passing a custom `getRouteName()` function. You will get TypeScript validation almost everywhere, so changing this should be easy. +### Route groups + +Sometimes, it helps to organize your file structure in a way that doesn't change the URL of your routes. Route groups let you organize your routes logically, in a way that makes sense to you, without affecting the actual URLs. For example, if you have several routes that share the same layout, you can group them together using route groups. + +```text +src/pages/ +├── (admin)/ +│ ├── dashboard.vue +│ ├── settings.vue +├── (user)/ +│ ├── profile.vue +│ ├── orders.vue +``` + +You can also use file route groups for better organization. For example: + +```text +src/pages/ +├── admin/ +│ ├── (dashboard).vue // Becomes index.vue of admin route +│ ├── settings.vue +``` + ## Named views It is possible to define [named views](https://router.vuejs.org/guide/essentials/named-views.html#named-views) by appending an `@` + a name to their filename, e.g. a file named `src/pages/index@aux.vue` will generate a route of: From ab0c81774a58062b33abe6d1bb43b43476f61cc7 Mon Sep 17 00:00:00 2001 From: Nemanja Malesija Date: Tue, 14 Jan 2025 23:33:04 +0100 Subject: [PATCH 02/14] Update file-based-routing.md --- docs/guide/file-based-routing.md | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index d86db6a41..003ad6229 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -109,18 +109,27 @@ const routes = [ All generated routes that have a `component` property will have a `name` property. This avoid accidentally directing your users to a parent route. By default, names are generated using the file path, but you can override this behavior by passing a custom `getRouteName()` function. You will get TypeScript validation almost everywhere, so changing this should be easy. -### Route groups +## Route groups -Sometimes, it helps to organize your file structure in a way that doesn't change the URL of your routes. Route groups let you organize your routes logically, in a way that makes sense to you, without affecting the actual URLs. For example, if you have several routes that share the same layout, you can group them together using route groups. +Sometimes, it helps to organize your file structure in a way that doesn't change the URL of your routes. Route groups let you organize your routes logically, in a way that makes sense to you, without affecting the actual URLs. For example, if you have several routes that share the same layout, you can group them together using route groups. Consider the the following file structure: ```text src/pages/ ├── (admin)/ -│ ├── dashboard.vue -│ ├── settings.vue +│   ├── dashboard.vue +│   └── settings.vue ├── (user)/ -│ ├── profile.vue -│ ├── orders.vue +│   ├── profile.vue +│   └── order.vue +``` + +In this case, even though the files are grouped into (admin) and (user) directories, the resulting URLs will be: + +```text +├── dashboard.vue +├── settings.vue +├── profile.vue +├── order.vue ``` You can also use file route groups for better organization. For example: @@ -128,8 +137,11 @@ You can also use file route groups for better organization. For example: ```text src/pages/ ├── admin/ -│ ├── (dashboard).vue // Becomes index.vue of admin route -│ ├── settings.vue +│   ├── (dashboard).vue // Becomes index.vue of admin route +│   └── settings(additional-info).vue // Becomes settings.vue +├── (user)/ +│   ├── dashboard.vue +│   └── settings.vue ``` ## Named views From 3a3ff805f190d6da733d30a194771aa06b74c665 Mon Sep 17 00:00:00 2001 From: Nemanja Malesija Date: Tue, 14 Jan 2025 23:34:14 +0100 Subject: [PATCH 03/14] Update file-based-routing.md --- docs/guide/file-based-routing.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index 003ad6229..49ba6f114 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -126,6 +126,7 @@ src/pages/ In this case, even though the files are grouped into (admin) and (user) directories, the resulting URLs will be: ```text +src/pages/ ├── dashboard.vue ├── settings.vue ├── profile.vue From b0d4e34d7c0c5d88e7ea71598ea7883466057eb5 Mon Sep 17 00:00:00 2001 From: Nemanja Malesija Date: Tue, 14 Jan 2025 23:37:53 +0100 Subject: [PATCH 04/14] Update file-based-routing.md --- docs/guide/file-based-routing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index 49ba6f114..a1f76df90 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -111,7 +111,7 @@ All generated routes that have a `component` property will have a `name` propert ## Route groups -Sometimes, it helps to organize your file structure in a way that doesn't change the URL of your routes. Route groups let you organize your routes logically, in a way that makes sense to you, without affecting the actual URLs. For example, if you have several routes that share the same layout, you can group them together using route groups. Consider the the following file structure: +Sometimes, it helps to organize your file structure in a way that doesn't change the URL of your routes. Route groups let you organize your routes logically, in a way that makes sense to you, without affecting the actual URLs. For example, if you have several routes that share the same layout, you can group them together using route groups. Consider the following file structure: ```text src/pages/ From 2c8b2321412ae7b8a06c08525a54d28da24c869d Mon Sep 17 00:00:00 2001 From: Nemanja Malesija Date: Tue, 14 Jan 2025 23:39:59 +0100 Subject: [PATCH 05/14] Update docs/guide/file-based-routing.md Co-authored-by: Eduardo San Martin Morote --- docs/guide/file-based-routing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index a1f76df90..380be094e 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -133,7 +133,7 @@ src/pages/ ├── order.vue ``` -You can also use file route groups for better organization. For example: +You can also use route groups in page components. This is equivalent to name the page component `index.vue`: ```text src/pages/ From c4bc5037ce5ab8f08dbde7dfa321e025502a6428 Mon Sep 17 00:00:00 2001 From: Nemanja Malesija Date: Tue, 14 Jan 2025 23:50:26 +0100 Subject: [PATCH 06/14] Update file-based-routing.md --- docs/guide/file-based-routing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index 380be094e..61fbddf50 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -139,7 +139,7 @@ You can also use route groups in page components. This is equivalent to name the src/pages/ ├── admin/ │   ├── (dashboard).vue // Becomes index.vue of admin route -│   └── settings(additional-info).vue // Becomes settings.vue +│   └── settings.vue ├── (user)/ │   ├── dashboard.vue │   └── settings.vue From 2a3aebeed2355b85e3894aade274d00703e55924 Mon Sep 17 00:00:00 2001 From: Nemanja Malesija Date: Tue, 14 Jan 2025 23:56:58 +0100 Subject: [PATCH 07/14] Update file-based-routing.md --- docs/guide/file-based-routing.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index 61fbddf50..49812a352 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -140,9 +140,6 @@ src/pages/ ├── admin/ │   ├── (dashboard).vue // Becomes index.vue of admin route │   └── settings.vue -├── (user)/ -│   ├── dashboard.vue -│   └── settings.vue ``` ## Named views From ed3971f937e1ccaa134500e61d4b4de2e6139466 Mon Sep 17 00:00:00 2001 From: Nemanja Malesija Date: Wed, 15 Jan 2025 10:02:52 +0100 Subject: [PATCH 08/14] Update file-based-routing.md --- docs/guide/file-based-routing.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index 49812a352..438955c9a 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -123,15 +123,14 @@ src/pages/ │   └── order.vue ``` -In this case, even though the files are grouped into (admin) and (user) directories, the resulting URLs will be: - +Resulting URLs: ```text -src/pages/ -├── dashboard.vue -├── settings.vue -├── profile.vue -├── order.vue +- `/dashboard` -> renders `dashboard.vue` +- `/settings` -> renders `settings.vue` +- `/profile` -> renders `profile.vue` +- `/order` -> renders `order.vue` ``` +This approach allows you to organize your files for better maintainability without changing the structure of your application's routes. You can also use route groups in page components. This is equivalent to name the page component `index.vue`: From dce6391e87136cc502d6af0c7a271e979df6a7cb Mon Sep 17 00:00:00 2001 From: Nemanja Malesija Date: Wed, 15 Jan 2025 15:29:43 +0100 Subject: [PATCH 09/14] Update docs/guide/file-based-routing.md Co-authored-by: Eduardo San Martin Morote --- docs/guide/file-based-routing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index 438955c9a..cfac486f1 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -125,7 +125,7 @@ src/pages/ Resulting URLs: ```text -- `/dashboard` -> renders `dashboard.vue` +- `/dashboard` -> renders `src/pages/(admin)/dashboard.vue` - `/settings` -> renders `settings.vue` - `/profile` -> renders `profile.vue` - `/order` -> renders `order.vue` From 9ee3544f9d49c9f4fe80b4d87e1faf998cab90d7 Mon Sep 17 00:00:00 2001 From: Nemanja Malesija Date: Wed, 15 Jan 2025 15:30:47 +0100 Subject: [PATCH 10/14] Update docs/guide/file-based-routing.md Co-authored-by: Eduardo San Martin Morote --- docs/guide/file-based-routing.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index cfac486f1..79c22b2f9 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -118,9 +118,9 @@ src/pages/ ├── (admin)/ │   ├── dashboard.vue │   └── settings.vue -├── (user)/ -│   ├── profile.vue -│   └── order.vue +└── (user)/ +    ├── profile.vue +   └── order.vue ``` Resulting URLs: From 280d223cc4b138a27db7240130cad4086a87ed4e Mon Sep 17 00:00:00 2001 From: Nemanja Malesija Date: Wed, 15 Jan 2025 15:32:46 +0100 Subject: [PATCH 11/14] Update file-based-routing.md --- docs/guide/file-based-routing.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index 79c22b2f9..79052872a 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -125,10 +125,10 @@ src/pages/ Resulting URLs: ```text -- `/dashboard` -> renders `src/pages/(admin)/dashboard.vue` -- `/settings` -> renders `settings.vue` -- `/profile` -> renders `profile.vue` -- `/order` -> renders `order.vue` +- `/dashboard` -> Route groups`src/pages/(admin)/dashboard.vue` +- `/settings` -> renders `src/pages/(admin)/settings.vue` +- `/profile` -> renders src/pages/(user)/`profile.vue` +- `/order` -> renders `src/pages/(user)/order.vue` ``` This approach allows you to organize your files for better maintainability without changing the structure of your application's routes. From 9aa3d2f39ca427f8c3383aeb80d879f31e3f5543 Mon Sep 17 00:00:00 2001 From: Nemanja Malesija Date: Wed, 15 Jan 2025 15:34:59 +0100 Subject: [PATCH 12/14] Update file-based-routing.md --- docs/guide/file-based-routing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index 79052872a..64dd203c0 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -125,9 +125,9 @@ src/pages/ Resulting URLs: ```text -- `/dashboard` -> Route groups`src/pages/(admin)/dashboard.vue` +- `/dashboard` -> renders `src/pages/(admin)/dashboard.vue` - `/settings` -> renders `src/pages/(admin)/settings.vue` -- `/profile` -> renders src/pages/(user)/`profile.vue` +- `/profile` -> renders `src/pages/(user)/profile.vue` - `/order` -> renders `src/pages/(user)/order.vue` ``` This approach allows you to organize your files for better maintainability without changing the structure of your application's routes. From 9920ed3bbae8b5dee0e9b0eb2e27575ce68f28af Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 15 Jan 2025 16:17:57 +0100 Subject: [PATCH 13/14] Update docs/guide/file-based-routing.md --- docs/guide/file-based-routing.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index 64dd203c0..f4a12b178 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -136,9 +136,9 @@ You can also use route groups in page components. This is equivalent to name the ```text src/pages/ -├── admin/ -│   ├── (dashboard).vue // Becomes index.vue of admin route -│   └── settings.vue +└─── admin/ +    ├── (dashboard).vue // Becomes index.vue of admin route +    └── settings.vue ``` ## Named views From cc53c1ea571067a1f65d4e07f3d2421ce89fa7dd Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 15 Jan 2025 16:18:33 +0100 Subject: [PATCH 14/14] Update docs/guide/file-based-routing.md [skip ci] --- docs/guide/file-based-routing.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/guide/file-based-routing.md b/docs/guide/file-based-routing.md index f4a12b178..d9e037fc0 100644 --- a/docs/guide/file-based-routing.md +++ b/docs/guide/file-based-routing.md @@ -130,6 +130,7 @@ Resulting URLs: - `/profile` -> renders `src/pages/(user)/profile.vue` - `/order` -> renders `src/pages/(user)/order.vue` ``` + This approach allows you to organize your files for better maintainability without changing the structure of your application's routes. You can also use route groups in page components. This is equivalent to name the page component `index.vue`: