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数据。一切正常，但当我点击浏览器上的后退＆lt; - 按钮时，只显示json。然后我必须在浏览器中刷新页面（ctl + R）以获取vue组件。

这是控制器代码：

公共功能索引（Request $ request，VideoRepository $ video_repo，Channel $ 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,
    ]);
}

这是我的channel.index页面：

@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/

希望这对以后有所帮助！

当浏览器返回＆lt; - 按钮时，Json会显示在Vue组件上

1 个答案: