问题使用Laravel和Vue调用API

Question

我是新来使用vue和laravel的，我有问题了解如何使用laravel

app.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './router';
import App from './components/App.vue';

Vue.use(VueRouter)
Vue.use(VueAxios, axios);

const router = new VueRouter({
    mode: 'history',
    routes: routes
});
 
const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
    components: { App }
    }
});

router.js

import SurveyShow from './components/SurveyShow.vue';

export const routes = [
    
    {   name: 'edit', 
        path: '/edit', 
        component: SurveyShow
    }
]

surveyshow.vue

<template>
    <div class="row">
        <div class="col-12 mb-2 text-end">
            <router-link :to='{name:"categoryAdd"}' class="btn btn-primary">Create</router-link>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Category</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody v-if="categories.length > 0">
                                <tr v-for="(category,key) in categories" :key="key">
                                    <td>{{ category.id }}</td>
                                    <td>{{ category.title }}</td>
                                    <td>{{ category.description }}</td>
                                </tr>
                            </tbody>
                            <tbody v-else>
                                <tr>
                                    <td colspan="4" align="center">No Categories Found.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"categories",
    data(){
        return {
            categories:[]
        }
    },
    mounted(){
        this.getCategories()
    },
    methods:{
        async getCategories(){
            await this.axios.get('/api/edit').then(response=>{
                this.categories = response.data
            }).catch(error=>{
                console.log(error)
                this.categories = []
            })
        }
    }
}
</script>

api.php

Route::get('/edit','SurveyController@edit')->name('edit');

使用VUE路由器，如果我放入浏览器中，执行顺序是什么？ http://127.0.0.0.1:8000/api/edit“ rel =” nofollow noreferrer“> http://127.0.0.1.1:8000.1:8000/api/edit/edit

我看到的唯一的结果是API的结果：

{ “ data1”：{“ id”：2，“ name”：“ i130”，“ version_name”：“ 1.25.800”，“ slug”：“ i130”，......

Answer 1

您需要返回souselecontroller中的视图，在方法编辑中，如下所示：

Route::get('/edit','SurveyController@edit')->name('edit');

在屏幕上渲染了控制器的编辑方法中的任何内容。