Ответ API с этим. $ Route.params.slug - PullRequest
Новая
       14

Ответ API с этим. $ Route.params.slug

0 голосов
/ 13 мая 2018

Я использую vue-router для связи через страницу «index» со списком записей для ресурса, и у меня есть роутер-ссылка для перехода на страницу для отдельной записи. Маршрут работает нормально, но я не могу получить ответ API только для этой записи.

В консоли я получаю 404:

GET http://localhost:8080/this.$route.params.slug 404 (не найдено)

В Devtools мой массив пуст

$ route errors: Array [1] 0: Error gin: Array [0]

router.index.js 

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Gins from '@/components/Gins'
import GinsShow from '@/components/GinsShow'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/gins',
      name: 'Gins',
      component: Gins
    },
    {
      path: '/gins/:slug',
      name: 'Gin-Show',
      component: GinsShow
    }
  ]
})

компонент / GinsShow.vue 

<template>
    <div id="Gin-Show">
        <div class="container mx-auto pt-16 p-8">
            <h1 class="font-black tracking-wide uppercase mb-8">{{gin.name}}</h1>
                <div class="flex flex-wrap">

                </div>
        </div>
    </div>

</template>
<script>

import axios from 'axios'

export default {
    name: 'Gin-Show',
    data() {
        return {
            gin: [],
            errors: []
        }
    },


    created() {
        axios.get('this.$route.params.slug')
        .then(response => {
            this.gin = response.data
        })
        .catch(e => {
            this.errors.push(e)
        })
    }
}
</script>

<style>

</style>

1 Ответ

0 голосов
/ 13 мая 2018

У вас есть строка, где вы не должны: 

axios.get('this.$route.params.slug')

должно быть 

axios.get(this.$route.params.slug)

Вам, вероятно, нужно создать URL-адрес, используя параметр slug, поэтому я ожидаю, что это будетбыть примерно таким: 

axios.get('/resource/' + this.$route.params.slug)

но это зависит от вашего сервера API.

...