Question

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

当我直接打开这个网址example.com/items时，它只显示我从Laravel获得的json响应，而不在html（Vue.js）中创建任何视图。见下文：

如何在不首先访问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 File Vue.js Code

<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从路由JsonResponse返回/items，因此您在浏览器中看到JSON的原因。 Vue将JSON绑定到dom元素。

您需要修改/items的路由，以便在$request->wantsJson()时返回JSON，如果不是ajax则返回常规响应。

Answer 2

[行为]
laravel拥有自己的路由服务器。当您尝试刷新自定义Vue.js路由时，它会显示使用Vue.js路由覆盖laravel路由，并仅显示 JSON 响应。
[解决方案]
您应该创建Vue.js申请并使用laravel-echo或laravel broadcasting并使用laravel api。
现在从Vue发出每个请求以指示API和Get Response。

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

2 个答案: