Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-18 09:25:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add composition api example for dynamic routes (#2365)

Browse Source
This commit is contained in:
Ben Hong 2021-12-17 04:31:28 -05:00 committed by GitHub
parent 3eed5cb193
commit 1b1fd203c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/content/3.docs/2.directory-structure/9.pages.md
View File

@ -46,6 +46,21 @@ Navigating to `/users-admins/123` would render:
admins 123 admins 123
``` ```
If you want to access the route using Composition API, there is a global `useRoute` function that will allow you to access the route just like `this.$route` in the Options API.
```js
<script setup>
// This import statement is optional since it's automatically imported by Nuxt.
// import { useRoute } from '#imports'
const route = useRoute()
if (route.params.group === 'admins' && !route.params.id) {
console.log('Warning! Make sure user is authenticated!')
}
</script>
```
## Navigation ## Navigation
To navigate between pages of your app, you should use the  `<NuxtLink>` component. This component is included with Nuxt and therefore you don't have to import it as you do with other components. It is similar to the HTML `<a>` tag except that instead of using a `href="/about"` you use `to="/about"`. If you've used `vue-router` before, you can think of `<NuxtLink>` as a replacement for `<RouterLink>`. To navigate between pages of your app, you should use the  `<NuxtLink>` component. This component is included with Nuxt and therefore you don't have to import it as you do with other components. It is similar to the HTML `<a>` tag except that instead of using a `href="/about"` you use `to="/about"`. If you've used `vue-router` before, you can think of `<NuxtLink>` as a replacement for `<RouterLink>`.