<template>
|
|
<div>
|
|
<h1>Continent: {{ continent }}</h1>
|
|
<h2>Mountain: {{ mountain }}</h2>
|
|
<p>Path: {{ $route.path }}</p>
|
|
<NuxtLink to="/">
|
|
Back to Mountains
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
async asyncData ({ params, redirect }) {
|
|
const mountains = await fetch(
|
|
'https://api.nuxtjs.dev/mountains'
|
|
).then(res => res.json())
|
|
|
|
const filteredMountain = mountains.find(
|
|
el =>
|
|
el.continent.toLowerCase() === params.continent &&
|
|
el.slug === params.mountain
|
|
)
|
|
if (filteredMountain) {
|
|
return {
|
|
continent: filteredMountain.continent,
|
|
mountain: filteredMountain.title
|
|
}
|
|
} else {
|
|
redirect('/')
|
|
}
|
|
}
|
|
}
|
|
</script>
|