单击浏览器的后退 <- 按钮时，Json 显示在 Vue 组件上答案

【问题标题】：Json being displayed instead on Vue component when browser's back <- button is clicked单击浏览器的后退 <- 按钮时，Json 显示在 Vue 组件上
【发布时间】：2017-08-14 11:54:47
【问题描述】：

我使用 Laravel 5.4 和 VueJs 2.0 创建了一个小项目。它不是单页应用程序。我在每个页面上都使用 vue 组件来显示内容。我的应用程序的流程是这样的：每当用户单击导航栏中的选项卡时，他就会被重定向到相应的组件。在 laravel 方面，我只是使用return view(login);，在 login.blade.php 上，我使用<login-component></login-component>，然后发送 ajax 请求来获取数据。我真的不知道这是否是生成 2 个 http 请求的正确方法（如果有人知道更好的方法，请告诉我）。大多是ajax请求加载vue组件，控制器返回json数据。一切正常，但是当我点击浏览器上的 back 按钮时，只显示 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;
     });

我哪里错了？？

【问题讨论】：

标签： laravel-5 vue.js

【解决方案1】：

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

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

这里 Craig Buckler 写了更多关于这个问题的文章： https://www.sitepoint.com/solve-caching-conundrums/

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

【讨论】：