Vue Router + Laravel：重新加载没有 404 的页面并传入路由变量答案

【问题标题】：Vue Router + Laravel: Reloading a page without a 404 and passing in a route varableVue Router + Laravel：重新加载没有 404 的页面并传入路由变量
【发布时间】：2019-11-05 17:58:08
【问题描述】：

在重新加载我的单页应用程序时，我希望 url 能够正确加载，而不是引发 404 错误。使用 Laravel 5.6、Vue.js 2.6 和 MAMP。

我已经尝试了以下代码，但是，我正在根据 URL 的内容在同一个欢迎视图中加载不同的 app.js 文件。由于这种结构，此解决方案不起作用：

Route::get('/{vue_capture?}', function () {
    return view('welcome', ['app_path' => 'load different vuejs apps here in my routes/web.php file based on the url']);
})->where('vue_capture', '[\/\w\.-]*');

我想用我的 vue 路由器进行刷新工作。任何与我的 routes/web.php 文件或 .htaccess 文件有关的建议都值得赞赏。

注意：这个 .htaccess 文件配置对我不起作用（apache）： https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

//welcome blade
    <div id="app">
        <app></app>
    </div>
    <script src="{{ asset($app_path) }}"></script>

//app.vue
    <div class="container-fluid px-0">
        <router-view/>
    </div>

【问题讨论】：

一般来说，你走的是一条好路。我可以看看你的 Blade 模板吗？你有<router-view/>吗？
@BenjaminBeganović 我将您要求的代码添加到我的问题中。

标签： laravel vue.js vuejs2 vue-router

【解决方案1】：

嗯，据我所知，您的方法很好。您正在捕获所有 GET 请求，并将它们传递给您的 Blade 视图。

我的建议：

更清洁的路线： Route::get('/{any}', 'YourController@index')->where('any', '.*');

您的 app.js（主 JS 文件应如下所示）：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './views/App'
import About from './views/About'
import Home from './views/Home'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About,
        },
    ],
});

const app = new Vue({
    el: '#app',
    components: { App },
    router,
});

有了所有这些配置和你的router-view，你应该没问题。

【讨论】：