[401] Can’t get nested routes to work with a slug

Hi,

I’m having troubles to have a nested route working with anything but a number.

I basically used this exemple, and ended up with something like this:

blog.vue

<template>
	<section class="blog">
		<nuxt-link :to="'/blog/'+post.id">{{ post.name }}</nuxt-link>
	</section>
</template>

<script>
import axios from 'axios'

export default {
	data () {
		return axios.get('http://localhost:3001/posts')
		.then((res) => {
			return { posts: res.data }
		})
	}
}
</script>

_blog/_id.vue

<template>
	<article class="post">
		<h1>{{ title }}</h1>
		{{ body }}
	</article>
</template>

<script>
import axios from 'axios'

export default {
	validate ({ params }) {
		return !isNaN(+params.id)
	},

	data ({ params, error }) {
		return axios.get(`http://localhost:3001/posts/${+params.id}`)
		.then((res) => res.data)
		.catch(() => {
			error({ message: 'Post introuvable', statusCode: 404 })
		})
	}
}
</script>

In this case, everything works just fine. Clicking on the link get me the right url (/blog/1) and when clicking on a link, it’s opening the good page, with proper content.

But the thing is, I don’t wanna have an ID in the url, only a slug. I wanna have something like this: /blog/my-article-is-wonderful, so I set up my folder like this:

blog.vue

<template>
	<section class="blog">
		<nuxt-link :to="'/blog/'+post.slug">{{ post.name }}</nuxt-link>
	</section>
</template>

<script>
import axios from 'axios'

export default {
	data () {
		return axios.get('http://localhost:3001/posts')
		.then((res) => {
			return { posts: res.data }
		})
	}
}
</script>

_blog/_slug.vue

<template>
	<article class="post">
		<h1>{{ title }}</h1>
		{{ body }}
	</article>
</template>

<script>
import axios from 'axios'

export default {
	validate ({ params }) {
		return !isNaN(+params.slug)
	},

	data ({ params, error }) {
		return axios.get(`http://localhost:3001/posts/${+params.slug}`)
		.then((res) => res.data)
		.catch(() => {
			error({ message: 'Post introuvable', statusCode: 404 })
		})
	}
}
</script>

Now, the link href is properly setup and give the right url to follow, but when clicking I get to my error page with a 404 error; even though the path is good in the url bar.

Nothing special in the console or the shell.

I just can’t get it. I tried with another param, like an userID, and it worked well too. But if I try to get a route with a slug or anything else than a number, it fails.

What am I missing?

Thanks!