当从 Laravel 中的资源控制器访问视图时，Vue.js 中的 $http.get 不起作用

Question

我在 Laravel 项目中遇到了一个关于 Vue.js 的令人困惑的 JavaSript 问题：如果我直接从 routes.php 路由到同一个页面，它会工作，但如果我不使用资源控制器。

routes.php:

Route::resource('foo', 'FooController');

get('foo_create', function () {
    return view('foo.create');  // works
});

get('foobar_to_fetch', function () {
    return App\Node::all();  // some json
});

FooController.php:

class FooController extends Controller
{
    public function create()
    {
        return view('foo.create');  // broken
    }
}

views/foo/create.php:

<div id="foo">

    <table>
        <tr v-repeat="foobar">
            <td>{{ id }}</td>
            <td>{{ name }}</td>
        </tr>
    </table>

    <pre>{{ $data | json }}</pre>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"></script>
<script src="http://localhost/foo/resources/views/foo/create.js"></script>

views/foo/create.js:

new Vue({

    el: '#foo',

    data: {
        foobar: []
    },

    ready: function() {
        this.fetchFoobar();
    },

    methods: {
        fetchFoobar: function () {
            alert('no problem until here');
            this.$http.get('foobar_to_fetch', function (foobar_fetched) {
                alert(foobar_fetched.length);
                this.foobar = foobar_fetched;
            })
        }
    }

});

如果我转到 /foo_create，我会看到两个警报和带有获取数据的 table。如果我转到 /foo/create（这当然是我想要的），我只会看到第一个警报，仅此而已。

我发现如果我给 $http.get 完整路径，它在两种情况下都有效：

this.$http.get('http://localhost/foo/public/index.php/foobar_to_fetch', function (foobar_fetched) {

但同一个页面怎么可能表现不同，这取决于我是如何到达那里的？

如果被告知要查找'foobar_to_fetch'并且页面访问为/foo/create，$http.get会去哪里查找？在这种情况下是否有适用的相对路径？

Answer 1

尝试：

methods: {
        fetchFoobar: function () {
            alert('no problem until here');
            this.$http.get('/foobar_to_fetch', function (foobar_fetched) {
                alert(foobar_fetched.length);
                this.foobar = foobar_fetched;
            })
        }
    }

根据您触发此获取请求的位置，它会更改 url 因为 'foobar_to_fetch' 是相对的 url 而 '/foobar_to_fetch' 与域名相比是绝对的.

您也可以通过打开网络控制台（在 Chrome 上）检测到这一点，并查看 Ajax 请求发送的 headers。

当从 Laravel 中的资源控制器访问视图时，Vue.js 中的 $http.get 不起作用

$http.get in Vue.js does not work when view is accessed from resource controller in Laravel

javascript

url-routing

vue.js

laravel-5