새로 고침 시 VueJs 페이지 404 제공

새로 고침 시 VueJs 페이지 404 제공

방금 내 블로그 앱을 테스트 서버에 올렸어.홈페이지에서 게시물을 클릭하면 slug URL을 이용해 한 페이지를 볼 수 있지만, 한 페이지에서 새로 고치면 404 페이지가 나온다.

사용자 구성요소를 위해 다음과 같은 것을 사용했었다.

Route::get('/admin/users{vue_capture?}', function () {
    return view('admin');
})->where('vue_capture','[\/\w\.-]*');

내 경로.js는 다음과 같이 보인다.

import VueRouter from 'vue-router';
import Admin from './components/Admin.vue';
import Homepage from './components/Homepage.vue';
import Subscriber from './components/subscriber/Main.vue';
import Single from './components/Single.vue';
import Categories from './components/Categories.vue';

let routes = [
    {
        path: '/',
        component: Homepage
    },
    {
        path: '/subscriber',
        component: Subscriber
    },
    {
        path: '/post/:slug',
        name: 'post',    
        component: Single
    },
    {
        path: '/categories/:slug',
        component: Categories
    }
];

export default new VueRouter({
    mode: 'history',
    routes
});

그리고 나의 라라벨 노선은 다음과 같다.

<?php
use App\User;
use App\Http\Resources\User as UserResource;
use App\Http\Resources\UserCollection;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
    return view('homepage');
});

Auth::routes();
Route::get('/logout', 'Auth\LoginController@logout')->name('logout' );
Route::get('/home', 'HomeController@index')->name('home');

/************************************************************
                            API'S
************************************************************/
Route::get('/api/homeposts', 'HomePostsController@posts')->name('homeposts');
Route::resource('/api/users', 'AdminUsersController');
Route::resource('/api/posts', 'AdminPostsController');
Route::resource('/api/categories', 'AdminCategories');
Route::get('/api/loggedUser', 'AdminUsersController@loggUser')->name('singleUser');
Route::put('/api/updatedUser/{id}', 'AdminUsersController@updateUser')->name('singleUserUpdate');

Route::resource('/api/subscriber', 'SubscriberController');
/*Route::get('/admin/users{vue_capture?}', function () {
    return view('admin');
})->where('vue_capture','[\/\w\.-]*');*/

/************************************************************
                        ADMIN ROUTES
************************************************************/
Route::group(['middleware'=>'admin'], function(){
    Route::get('/admin/users', 'AdminUsersController@users')->name('allusers');
    Route::resource('/admin/posts', 'AdminPostsController');
});

/************************************************************
                    SUBSCRIBER ROUTE
************************************************************/
Route::group(['middleware'=>'subscriber'], function(){
    Route::get('/subscriber/{vue_capture?}', function () {
        return view('homepage');
    })->where('vue_capture','[\/\w\.-]*');
});

/**********************************************************/

Route::get('/single/post/{slug}', 'AdminPostsController@single');

그런데 포스트 페이지 한 장에 대해 정확히 어떻게 처리할 수 있을까?

진입점을 다음과 같이 가정해 보십시오.index당신의 방법HomeController, 당신은 단지 당신의 하단에 이 루트를 추가하기만 하면 된다.routes/web.php파일

Route::get('{any}', function () {
    return view('homepage');
})->where('any','.*');

이것은 Vue와 문제가 아니다.

내가 웹페이지 http://blog.sidneylab.com/post/quasi-non-est-magnam-quae-aut-omnis-nisi을 방문하면 (당신의 웹사이트에 첫 번째 게시물) 나는404서버 자체의 오류.다른 것들도 마찬가지야/post/

즉, 경로가 일치할 때 경로 핸들러가 관련 Vue 색인 또는 코드를 전송하지 않는 경우.다음 중 하나를 사용하여 이 작업을 수행하는지 확인하십시오./post/URL 또는 기본 경로 핸들러 하단에 캐치 올 핸들러 추가:

Route::get("{any}", "DefaultHandler@myMethod")->where("any", ".*");

의 밑바닥에 덧붙이다web.php

Route::get('{path}', 'HomeController@dashboard')->where('path','([A-z\d\-\/_.]+)?')`

참조URL: https://stackoverflow.com/questions/51399802/vuejs-page-gives-404-on-refresh