laravel VueJs页面刷新时出现404

x33g5p2x  于 12个月前  发布在  其他
关注(0)|答案(4)|浏览(110)

我刚把我的博客应用程序上传到测试服务器。当我从主页上点击后,我可以查看使用slug URL的单个页面。但是,从单个页面,如果我刷新页面,它会给我一个404页面。
我在我的用户组件中使用了类似下面的东西:

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

这就是我的routes.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
});

我的Laravel路由是这样的:

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

但是我如何处理单独的文章页面呢?

qvk1mo1f

qvk1mo1f1#

假设您的入口点是HomeControllerindex方法,您只需要在routes/web.php文件的底部添加此路由。

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

oipij1gg2#

这不是Vue的问题。
当我访问网页http://blog.sidneylab.com/post/quasi-non-est-magnam-quae-aut-omnis-nisi(您网站上的第一篇文章)时,我从服务器本身得到一个404错误。与/post/上的任何其他内容相同
这意味着当路由匹配时,你的路由处理程序不会发送相关的Vue索引或代码。确保它使用/post/ URL或在默认路由处理程序的底部添加catch-all handler来执行此操作:

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

yhxst69z3#

web.php的底部添加

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

myzjeezk4#

解决方案是:

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

这有助于Laravel捕获Vue生成的URL!就是这样!

相关问题