docs(migration): add programmatic navigation example to pages and layouts (#4072)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>
This commit is contained in:
Dan Pastori 2022-04-07 04:41:49 -07:00 committed by GitHub
parent 76eedb852e
commit 75cbfbcb7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -177,3 +177,47 @@ definePageMeta({
Most of the syntax and functionality are the same for the global [NuxtLink](/api/components/nuxt-link) component. If you have been using the shortcut `<NLink>` format, you should update this to use `<NuxtLink>`.
`<NuxtLink>` is now a drop-in replacement for _all_ links, even external ones. You can read more about it, and how to extend it to provide your own link component, [in the docs](/api/components/nuxt-link).
## Programmatic Navigation
When migrating from Nuxt 2 to Nuxt 3, you will have to update how you programmatically navigate your users. In Nuxt 2, you had access to the underlying Vue Router with `this.$router`. In Nuxt 3, you can use the `navigateTo()` utility method which allows you to pass a route and parameters to Vue Router.
**Note:** Ensure to always `await` on `navigateTo` or chain it's result by returning from functions.
::code-group
```vue [Nuxt 2]
<script>
export default {
methods: {
navigate(){
this.$router.push({
path: '/search',
query: {
name: 'first name',
type: '1'
}
})
}
}
}
</script>
```
```vue [Nuxt 3]
<script setup>
const router = useRouter();
function navigate(){
return navigateTo({
path: '/search',
query: {
name: 'first name',
type: '1'
}
})
}
</script>
```
::