时间戳

首页 > 解决方案 > 刷新 vuejs 模板不起作用，我只得到 json 数据、Vuejs 和 Laravel

laravel - 刷新 vuejs 模板不起作用，我只得到 json 数据、Vuejs 和 Laravel

问题描述

我有一条路线，当我刷新页面时，我只获得该页面的 JSON 信息。（仅在刷新 F5 时）。其余路线都还行。我不确定我做错了什么。

网页.php

 Route::get('/persons', 'MyController@index');
    Route::post('/record/{personId?}', 'MyController@create');  // this is the one that don't work on refresh
    Route::get('/record/{id}', 'MyController@getRecord');
    Route::delete('/record/{id}', 'MyController@destroy');
    Route::get('/lookups', 'LkpController@index');
    Route::post('/validate', 'MyController@getValidation');

//Routes for VueJs
    Route::get('/{any}', function () {
        return view('welcome');
    })->where('any','^(?!api).*$')->name('home');

路由器.js

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
        meta: { requiresAuth: true }
    },
    {
        path: "/record",
        name: "Record",
        component: Record,
        meta: { requiresAuth: true }
    },
    {
        path: "/record/:id",
        name: "View Record",
        component: require ('./components/AddPerson').default,
        meta: { requiresAuth: true }
    }
];

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});

export default router;

标签： laravelvue.jsvuejs2laravel-6

解决方案

问题是您将所有路由都放在 web.php 中，并且您的 Vue SPA 的路由与您的 Laravel 应用程序相同。

您应该将您的 API 路由放在您的web/api.php文件中，这样它们将自动以“api”路由为前缀。

返回 JSON 数据的路线不是您指出的路线，而是下一条路线：

Route::get('/record/{id}', 'MyController@getRecord'); // this is the one that don't work on refresh

这是因为您的 Vue 路由器指向完全相同的路由：

{
    path: "/record/:id",
    name: "View Record",
    component: require ('./components/AddPerson').default,
    meta: { requiresAuth: true }
}

两条路由都指向yourwebsite.com/record/{id}，但是在刷新时你向你的 Laravel 应用程序发出一个全新的请求，这意味着你不再在你的 Vue 应用程序中，你的浏览器将加载 Laravel 首先告诉他们的任何内容，在这种情况下，它将是第一个路由routes/web.php文件：

Route::get('/record/{id}', 'MyController@getRecord');

编辑：如果由于身份验证而无法使用 API 路由，您应该这样做：

你必须确保你的 Vue 路由器和你的 Laravel 路由之间没有重复的路由，你可以在它们前面加上对你有意义的东西。

Route::prefix('prefix')->group(function () {
    Route::get('/persons', 'MyController@index');
    Route::post('/record/{personId?}', 'MyController@create');
    Route::get('/record/{id}', 'MyController@getRecord');
    Route::delete('/record/{id}', 'MyController@destroy');
    Route::get('/lookups', 'LkpController@index');
    Route::post('/validate', 'MyController@getValidation');
});

//Routes for VueJs
    Route::get('/{any}', function () {
        return view('welcome');
    })->where('any','^(?!api).*$')->name('home');

在此示例中，您遇到问题的路线现在将以 'prefix' 为前缀yourwebsite.com/prefix/record/{id}，您可以将其更改为您需要的任何内容。

推荐阅读