using `$router.push` when validating a dynamic route - vue.js

Question

I am using Nuxt and I have created a have a dynamic route which fetches data using vuex and an axios call. I want to route the user back to index when no id params are specified. I see that i can use validate on dynamic routes https://nuxtjs.org/api/pages-validateWhen
I am using the code below, when I navigate to localhost:3000/settings/ i get the following error Cannot read property 'push' of undefined
pages/settings/_id.vue
export default {
validate({ params }) {
if (params.id !== null) {
this.$router.push({ name: 'index' })
}
return false
}
}

Answer 1

The validate is called every time before navigating to a new route. It will be called server-side once. This means the validate is executed before your component is created. So you can't access this.$router because this dont exist at this time.
Take a look in Fetch Hook and Nuxt Lifecycle to better explanations:
https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/#fetch-hook-and-nuxt-lifecycle
Basiclly what we need to do is import the redirect and route from the nuxt context to use it insite or validate function. The ROUTE have all the informations about your request, and the redirect is a function from nuxt is used inside middlewares.
I have created a exemple to you:
<template>
<v-row>
<v-col cols="12">
<pre>
{{ params }}
</pre>
</v-col>
</v-row>
</template>
<script>
export default {
data() {
return {
params: []
}
},
validate({ redirect, route }) {
if (route.params) {
// eslint-disable-next-line no-console
console.log('RouteParams:', route.params)
this.params = route.params
}
redirect({ name: 'index' })
// return false
}
}
</script>