Skip to content

docs(vue): recommend passing URL parameters as props instead of useRoute #4515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ShaneK wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs(vue): recommend passing URL parameters as props instead of useRoute #4515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions docs/vue/navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -527,7 +527,7 @@ For example usages, please refer to our [Utility Functions](utility-functions#us

## URL Parameters

Let's expand upon our original routing example to show how we can use URL parameters:
Let's expand upon our original routing example to show how we can use URL parameters. We recommend [passing URL parameters as props](https://router.vuejs.org/guide/essentials/passing-props.html) so that the component does not need a direct reference to the router, which makes it easier to reuse and test in isolation.

```tsx
const routes: Array<RouteRecordRaw> = [
Expand All @@ -544,11 +544,12 @@ const routes: Array<RouteRecordRaw> = [
path: '/detail/:id',
name: 'Detail',
component: DetailPage,
props: true,
},
];
```

Notice that we have now added `:id` to the end of our `detail` path string. URL parameters are dynamic portions of our route paths. When the user navigates to a URL such as `/details/1` the "1" is saved to a parameter named "id" which can be accessed in the component when the route renders.
Notice that we have now added `:id` to the end of our `detail` path string. URL parameters are dynamic portions of our route paths. When the user navigates to a URL such as `/details/1` the "1" is saved to a parameter named "id" which can be accessed in the component when the route renders. Setting `props: true` on the route record tells Vue Router to pass the matched URL parameters to the component as props.

Let's look at how to use it in our component:

Expand All @@ -567,14 +568,12 @@ Let's look at how to use it in our component:

<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const { id } = route.params;
defineProps<{ id: string }>();
</script>
```

Our `route` variable contains an instance of the current route. It also contains any parameters we have passed in. We can obtain the `id` parameter from here and display it on the screen.
The `id` parameter from the URL is received as a prop and rendered on the screen. The component has no dependency on the router itself.

## Router History

Expand Down
11 changes: 5 additions & 6 deletions versioned_docs/version-v7/vue/navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -527,7 +527,7 @@ For example usages, please refer to our [Utility Functions](utility-functions#us

## URL Parameters

Let's expand upon our original routing example to show how we can use URL parameters:
Let's expand upon our original routing example to show how we can use URL parameters. We recommend [passing URL parameters as props](https://router.vuejs.org/guide/essentials/passing-props.html) so that the component does not need a direct reference to the router, which makes it easier to reuse and test in isolation.

```tsx
const routes: Array<RouteRecordRaw> = [
Expand All @@ -544,11 +544,12 @@ const routes: Array<RouteRecordRaw> = [
path: '/detail/:id',
name: 'Detail',
component: DetailPage,
props: true,
},
];
```

Notice that we have now added `:id` to the end of our `detail` path string. URL parameters are dynamic portions of our route paths. When the user navigates to a URL such as `/details/1` the "1" is saved to a parameter named "id" which can be accessed in the component when the route renders.
Notice that we have now added `:id` to the end of our `detail` path string. URL parameters are dynamic portions of our route paths. When the user navigates to a URL such as `/details/1` the "1" is saved to a parameter named "id" which can be accessed in the component when the route renders. Setting `props: true` on the route record tells Vue Router to pass the matched URL parameters to the component as props.

Let's look at how to use it in our component:

Expand All @@ -567,14 +568,12 @@ Let's look at how to use it in our component:

<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const { id } = route.params;
defineProps<{ id: string }>();
</script>
```

Our `route` variable contains an instance of the current route. It also contains any parameters we have passed in. We can obtain the `id` parameter from here and display it on the screen.
The `id` parameter from the URL is received as a prop and rendered on the screen. The component has no dependency on the router itself.

## Router History

Expand Down
Loading