VueJs 页面在刷新时给出 404

Posted

技术标签:

【中文标题】VueJs 页面在刷新时给出 404【英文标题】:VueJs page gives 404 on refresh 【发布时间】:2018-12-26 05:49:58 【问题描述】:

我刚刚将我的博客应用上传到了测试服务器。当我从主页单击帖子时,我可以使用 slug URL 查看单个页面。但是,从单个页面中,如果我刷新页面,它会给我一个 404 页面。

我为我的用户组件使用了类似下面的内容:

Route::get('/admin/usersvue_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/usersvue_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');

但是我该如何处理单个帖子页面呢?

【问题讨论】:

你能发布你的 laravel 入口点路线吗?我的意思是回家路线。 请确保将其添加到routes/web.php文件的底部 【参考方案1】:

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

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

【讨论】:

它没有给我任何错误,但我看不到任何 vue 组件 我已经更新了。并且请确保将其放在 web.php 文件的底部 是的,是的,我把它放在文件的底部,现在它可以工作了。介意解释代码,也许指出一个链接,我可以阅读更多关于它的信息?否则感谢支持。 为了让你的路由器(vue-router)工作,你需要对你的 laravel 路由器做一些事情,即将请求转发到你的入口点,以便 vue-router 能够处理它而不是 laravel。 理解那部分。如果我的入口点不是我的 HomeController 的 index 方法怎么办?【参考方案2】:

这不是 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", ".*");

【讨论】:

【参考方案3】:

web.php底部添加

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

【讨论】:

以上是关于VueJs 页面在刷新时给出 404的主要内容,如果未能解决你的问题,请参考以下文章

Ember 在 localhost 上的页面刷新 404 apache 后给出 404

使用节点和角度应用程序在页面刷新时获取 404 页面

当页面刷新“404 - 找不到文件或目录”时。

刷新页面给出“找不到页面”

使用 Nginx 刷新页面显示 404 错误 [重复]

我在 vuejs 单页应用程序上刷新页面