当浏览器返回时，Json 被显示在 Vue 组件上 <- button is clicked

Question

我使用 Laravel 5.4 和 VueJs 2.0 创建了一个小项目。它不是单页应用程序。我在每个页面上使用 vue 组件来显示内容。我的应用程序的流程是这样的：每当用户单击导航栏中的选项卡时，他就会被重定向到相应的组件。在 laravel 方面，我只是使用

return view(login);

，在 login.blade.php 上，我使用

<login-component></login-component>

，然后发送 ajax 请求来获取数据。我真的不知道这是否是生成 2 个 http 请求的正确方法（如果有人知道更好的方法，请告诉我）。大多数情况下，对于加载 vue 组件的 ajax 请求，控制器会返回

json

数据。一切正常，但是当我单击浏览器上的 back <- 按钮时，只显示 json。然后我必须在浏览器中刷新页面 (ctl + R) 才能获取 vue 组件。

这是控制器代码：

公共函数索引（请求$request，VideoRepository$video_repo，频道$channel）{

    if ($request->ajax()) {
        $videos = $video_repo->getChannelVideos($channel);

        return response()->json([
            'data' => [
                'message'=> 'Success',
                'videos' => $videos,
                'channel' => $channel,
            ]
        ], 200);
    }

    return view('channels.index')->with([
        'channel_slug' => $channel->slug,
    ]);
}

这是我的频道索引页面：

@extends('templates.default')

@section('content')
    <channel-dashboard channel-slug="{{ $channel_slug }}"></channel-dashboard>
@endsection

这是我的频道仪表板 vue 组件：

axios.get('/channels/' + this.channelSlug)
     .then(({data}) => {
        this.videos = data.data.videos;
        this.channel = data.data.channel;

        this.divideVideosArrayInChuncks();
     })
     .catch(({response}) => {
        this.error = response.data;
     });

我哪里错了？？

Answer 1

如果 Laravel 使用相同的 URL 来显示您的 Vue 组件并获取 JSON 来提供组件，则浏览器可能会缓存 JSON 版本并在您点击后退按钮时显示它。这可能就是问题所在。

因此，您必须确保两个 URL 不同，也许可以使用查询参数（如 ?ajax=1）来了解何时提供 JSON。

克雷格·巴克勒 (Craig Buckler) 写了更多关于这个问题的文章： https://www.sitepoint.com/solve-caching-conundrums/

我希望这对以后的人有帮助！

Answer 2

您可以在提供 JSON 后使用

->header('Cache-Control', 'no-store');

。所以浏览器不会缓存你的 JSON。使用

->ajax

代替

->wantsJson()

。所以你的代码应该像下面这样：

if ($request->wantsJson()) {
    // calculations here
    return response()
           ->json($resultsHere, 200)
           ->header('Cache-Control', 'no-store');
}

return view('needed.view')->with(['neededResults'=>$needeResults]);

此解决方案的唯一问题是您不缓存！ （大多数时候你不想：D）