你好，我正在做一个简单的cocktailapp，用coktailDB API https://www.thecocktaildb.com/api.php来练习nuxt.js和axios。在drinks/index.vue中，我列出了所有带v-for的饮料。当点击一种饮料时，你会进入drinks/_id/index.vue页面，在那里，关于这种饮料的完整信息会通过它的ID显示出来。我使用的是$route.params.id，我已经试过了。$route.params. id。没有饮料信息显示出来。它只是显示未定义和括号。我如何才能得到饮料信息显示后，它的ID点击一个特定的饮料？提前感谢！
饮料/索引值;

<template>
  <div>
  <div>
    <SearchDrink/>
  </div>
  <div>
  <div v-for="drink in drinks" :key="drink.id"> 
  <nuxt-link :to="'drinks/' + id">
    <div class="drink">
    <p> {{ drink.strDrink
    }} </p>
    <img :src="drink.strDrinkThumb" alt=""/> 
    <p>Instructions:</p>
    <p> {{ drink.strInstructions }} </p>
    <div class="ing"> Ingridients: 
      <ul>
        <li>{{ drink.strIngredient1 }} </li>
        <li>{{ drink.strIngredient2 }} </li>
        <li>{{ drink.strIngredient3 }} </li>
        <li>{{ drink.strIngredient4 }} </li>
        <li>{{ drink.strIngredient5 }} </li>
      </ul>
  </div>
  </div>
</nuxt-link>
</div>
</div>
</div>
</template>

<script>
import SearchDrink from '../../components/SearchDrink.vue'
import axios from 'axios'

export default {
  components:{
    SearchDrink,
  },
  data(){
    return {
      drinks: [],
    }
  },
 methods: {
    getAllDrinks(){
      axios.get('https://thecocktaildb.com/api/json/v1/1/search.php?s=')
      .then((response) => {
        this.drinks = response.data.drinks
        const myDrink = response.data.drinks
        console.log(myDrink)
        console.log(myDrink.strDrinkThumb)  
        })
    .catch((error) =>{
      console.log(error)
    })
    
    }, 
 },
  created(){
    this.getAllDrinks()
  },
  // methods: {
  //   searchDrink(){
  //     if(!this.search){
  //       return this.drinks
  //     }else{
  //       return this.drinks.filter(drink => 
  //       drink.text.toLowerCase().includes(this.search.
  //       toLowerCase()))
  //     }
  //   }
  // },
    head(){
        return {
            title: 'Drinks App',
            meta: [
                {
                    hid: 'description',
                    name: 'description',
                    content: 'Best place to search a Drink'
                }
            ]
        }
    }
}
</script>

饮料/_id/索引.vue;

<template>
  <div>
    <nuxt-link to="/drinks">
        Go Back
    </nuxt-link>
    <h2> {{ drink }} </h2>
    <hr>
    <small>Drink ID: {{ this.$route.params.id }}</small>
  </div>
</template>

<script>
import axios from 'axios'

export default {
    data(){
        return{
            drink: {}
        }
    },
    methods: {
    getAllDrinks(){
      axios.get(`www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${this.$route.params.id}`)
      .then((response) => {
        this.drinks = response.data.drinks
        const myDrink = response.data.drinks
        console.log(myDrink) 
        })
    .catch((error) =>{
      console.log(error)
    })
    
    }, 
 },
  created(){
    this.getAllDrinks()
  },
  head(){
        return {
            title: this.drink,
            meta: [
                {
                    hid: 'description',
                    name: 'description',
                    content: 'Best place to search a Drink'
                }
            ]
        }
    }
}
</script>