На refre sh vuejs шаблон не работает и я получаю только json Data, Vuejs и Laravel - PullRequest
Новая
       27

На refre sh vuejs шаблон не работает и я получаю только json Data, Vuejs и Laravel

1 голос
/ 03 марта 2020

У меня есть маршрут, при котором при обновлении sh страницы я получаю только информацию JSON для этой страницы. (только на refre sh F5). Остальные маршруты в порядке. Я не уверен, что я делаю неправильно.

web. 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');

router. 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;

1 Ответ

2 голосов
/ 03 марта 2020

Проблема в том, что вы размещаете все свои маршруты в сети. 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}, но на refre sh вы делаете совершенно новый запрос к вашему Laravel приложению, это означает, что вы больше не находитесь в вашем Vue приложении, и ваш браузер загрузит все, что Laravel сообщит им первым, в этом случае это будет первый маршрут в routes/web.php file: 

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');

В этом примере маршрут, с которым у вас возникли проблемы, теперь будет иметь префикс "префикс" yourwebsite.com/prefix/record/{id} , вы можете изменить его на то, что вам нужно.

...