Question

我刚刚将博客应用上传到测试服务器，您可以see here。当我单击主页上的帖子时，我可以使用子弹式URL查看单个页面。但是，从单个页面来看，如果刷新页面，它将显示404页面。

我在用户组件中使用了以下内容：

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

这是我的route.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');

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

希望有人可以提供帮助

Answer 1

假设您的入口点是index的{{1}}方法，您只需要在HomeController文件的底部添加此路由即可。

routes/web.php

Answer 2

这不是Vue的问题。

当我访问网页http://blog.sidneylab.com/post/quasi-non-est-magnam-quae-aut-omnis-nisi（您网站上的第一篇文章）时，我从服务器本身收到了一个<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <style> /* Card and Button */ body { background-color: #f5f5f5; } div { background-color: #fff; } .index-content a:hover { color: black; text-decoration: none; } .index-content .row { margin-top: 20px; } .index-content a { color: black; } .index-content .card { background-color: #FFFFFF; padding: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); } .index-content .card:hover { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3); color: black; } .index-content .card img { width: 100%; border-top-left-radius: 4px; border-top-right-radius: 4px; height: 350px; } .index-content .card h4 { margin: 20px; } .index-content .card p { margin: 20px; opacity: 0.65; } .index-content .blue-button { width: 100px; -webkit-transition: background-color 1s, color 1s; /* For Safari 3.1 to 6.0 */ transition: background-color 0.5s, color 0.5s; min-height: 20px; background-color: #002E5B; color: #ffffff; border-radius: 4px; text-align: center; font-weight: lighter; margin: 0px 20px 15px 20px; padding: 5px 0px; display: inline-block; } .index-content .blue-button:hover { background-color: #dadada; color: #002E5B; } /* GRID ELEMENTS MEDIA QUERIES */ @media (min-width: 768px) { .card { position: relative; } .card-content { position: absolute; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.5); } .card-content h4, .card-content p { color: white; width: 100%; float: left; margin: 0 0 5px; } .card-content a { float: right; } .index-content .card h4, .index-content .card p { padding: 15px 20px; margin: 0; } .index-content .card p { padding: 0 20px 15px; margin: 0; } } .margin_bottom { margin-bottom: 10px; } .row [class*="col-"] { padding-right: 5px; padding-left: 5px; } .row { margin-left: -5px; margin-right: -5px; } .card-img-bottom { color: #fff; height: 20rem; background: url(images/img1.jpg) center no-repeat; background-size: cover; } .img-responsive { height: 100%; } @media (max-width: 768px) { .img-responsive { width: 100%; } } </style> <div class="container">  <div class="row"> <div class="col-sm-12"> <div class="row"> <div class="col-sm-6 margin_bottom"> <img src="http://placehold.it/600x410" alt="5" class="img-responsive" /> </div> <div class="col-sm-6"> <div class="row"> <div class="col-sm-12 margin_bottom"> <img src="http://placehold.it/600x200" alt="5" class="img-responsive" /> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-6"> <img src="http://placehold.it/300x200" alt="5" class="img-responsive" /> </div> <div class="col-xs-6 col-sm-6"> <img src="http://placehold.it/300x200" alt="5" class="img-responsive" /> </div> </div> </div> </div> </div> </div>  <div class="row"> <div class="col-sm-4 margin_bottom"> <img src="http://placehold.it/400x510" alt="5" class="img-responsive" /> </div> <div class="col-sm-4"> <div class="row"> <div class="col-xs-6 col-sm-12 margin_bottom"> <img src="http://placehold.it/400x250" alt="5" class="img-responsive" /> </div> <div class="col-xs-6 col-sm-12 margin_bottom"> <img src="http://placehold.it/400x250" alt="5" class="img-responsive" /> </div> </div> </div> <div class="col-sm-4 margin_bottom"> <img src="http://placehold.it/400x510" alt="5" class="img-responsive" /> </div> </div>  <div class="row"> <div class="col-sm-3 margin_bottom"> <img src="http://placehold.it/300x410" alt="5" class="img-responsive" /> </div> <div class="col-sm-6 margin_bottom"> <img src="http://placehold.it/600x410" alt="5" class="img-responsive" /> </div> <div class="col-sm-3 margin_bottom"> <div class="row"> <div class="col-xs-6 col-sm-12 margin_bottom"> <img src="http://placehold.it/300x200" alt="5" class="img-responsive" /> </div> <div class=" col-xs-6 col-sm-12"> <img src="http://placehold.it/300x200" alt="5" class="img-responsive" /> </div> </div> </div> </div>  <div class="row"> <div class="col-sm-3 margin_bottom"> <div class="row"> <div class="col-xs-6 col-sm-12 margin_bottom"> <img src="http://placehold.it/300x200" alt="5" class="img-responsive" /> </div> <div class=" col-xs-6 col-sm-12"> <img src="http://placehold.it/300x200" alt="5" class="img-responsive" /> </div> </div> </div> <div class="col-sm-6 margin_bottom"> <img src="http://placehold.it/600x410" alt="5" class="img-responsive" /> </div> <div class="col-sm-3 margin_bottom"> <div class="row"> <div class="col-xs-6 col-sm-12 margin_bottom"> <img src="http://placehold.it/300x200" alt="5" class="img-responsive" /> </div> <div class=" col-xs-6 col-sm-12 margin_bottom"> <img src="http://placehold.it/300x200" alt="5" class="img-responsive" /> </div> </div> </div> </div> </div>错误。与404

上的其他所有内容相同

这意味着路由匹配时，路由处理程序没有发送相关的Vue索引或代码。确保使用/post/ URL或通过在默认路由处理程序底部添加catch-all handler来做到这一点：

/post/

Answer 3

添加到web.php的底部

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

VueJs页面刷新时显示404

3 个答案: