在 vue.js 组件中获取数据时调整 url

Question

所以我正在尝试在我的 vue 组件中获取数据，如下所示。但是因为我请求从 public/manage-users-projects 中的 blade 视图获取数据，所以 url 变成了

http://localhost:8080/ProjsiteWebApp/app/public/manage-users-projects/get-projects-json

但我想从此 url

中获取数据

http://localhost:8080/ProjsiteWebApp/app/public/get-projects-json

所以我可以选择 return 一条路线并从 public 文件夹执行吗？

export default {


    created(){
        this.fetchProjects();
    },


    methods:{
        fetchProjects() {
            fetch('get-projects-json')
                .then(res => res.json())
                .then(res => {
                    console.log(res.data);
                })
        }
    }
    
    

};






Route::get('get-projects-json', 'ProjectsController@getProjectsJson');

Answer 1

您可以将路由作为 props 传递给 blade 文件中的组件。

视图内部：

<component get-projects-json="{{ url('get-projects-json') }}"></component>

vue组件内部：

<script> 
    export default {
        props: ['getProjectsJson'],
    }
</script>

然后你可以像这样访问组件内部的路由：

export default {


    created(){
        this.fetchProjects();
    },


    methods:{
        fetchProjects() {
            fetch(this.getProjectsJson)
                .then(res => res.json())
                .then(res => {
                    console.log(res.data);
                })
        }
    }
    
    

};

您可以在这里了解更多关于道具的信息：https://vuejs.org/v2/guide/components-props.html

在 vue.js 组件中获取数据时调整 url

adjust the url when fetching data in vue.js component

laravel

vue.js

fetch-api