mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 23:22:02 +00:00
docs(migration): add programmatic navigation example to pages and layouts (#4072)
Co-authored-by: Pooya Parsa <pyapar@gmail.com>
This commit is contained in:
parent
76eedb852e
commit
75cbfbcb7e
@ -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>
|
||||
```
|
||||
|
||||
::
|
||||
|
Loading…
Reference in New Issue
Block a user