在Laravel + Vue.Js中不在自定义路线中创建的视图

Question

我正在使用Laravel 5.5和Vue.js 2.0
当我打开example.com并单击“ 显示项目”时，就会触发此网址
example.com/items
这是结果

当我直接打开此URL example.com/items它仅显示我从Laravel获得的json响应，而没有在html（Vue.js）中创建任何视图。 见下文：

我怎样才能获得在浏览器中准确的结果通过访问直接的url像example.com/items无需访问example.com第一。

更新为My Vue的routes.js文件

import Example from './components/ExampleComponent.vue'
import CreateItem from './components/CreateItem.vue'
import DisplayItem from './components/DisplayItem.vue'
import EditItem from './components/EditItem.vue'

export const routes = [
    { name: 'Example', path: '/', component: Example },
    { name: 'CreateItem', path: '/items/create', component: CreateItem },
    { name: 'DisplayItem', path: '/items', component: DisplayItem },
    { name: 'EditItem', path: '/items/:id/edit', component: EditItem }
];

像这样从Laravel得到回应

$items = Items::all();
//        dd($items);
        return response()->json($items);

DisplayItems.vue文件Vue.js代码

<script>
    export default {
        data(){
            return{ items: [] }
        },
        created: function()
        {
            this.fetchItems();
        },
        methods: {
            fetchItems()
            {
                this.axios.get('/items').
                    then(response => {
                        this.items = response.data;
                    });
            },
            deleteItem(id)
            {
                let uri = '/items/'+id;
                this.items.splice(id, 1);
                this.axios.delete(uri);
            }
        }
    }
</script>

Answer 1

Laravel从路由/items返回JsonResponse ，因此为什么在浏览器中看到JSON。 Vue将JSON绑定到dom元素。

您需要修改到/items的路由，以便如果$request->wantsJson()时返回JSON，而如果非ajax则返回常规Response。

Answer 2

[行为]
laravel有自己的带有路由的服务器。 当您尝试刷新自定义Vue.js路由时，它将显示使用laravel路由覆盖Vue.js路由，并仅显示JSON响应。
[解]
您应该创建Vue.js应用程序，并使用laravel-echo或laravel broadcasting并使用laravel api。
现在，将来自Vue的每个请求发送到直接API并获取响应。