Question

重新加载我的单页应用程序时，我希望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>

Answer 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，您应该会没事的。

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

1 个答案: