Javascript 在Laravel Homestead中使用Vue.js时，从URL中删除#散列

我有一个在Homestead运行的Laravel 5.2设置，并使用Vue.js路由器来构建SPA。我正试图从URL中完全删除#hash，我知道这是可以做到的，但我不断收到错误：

我最后添加了

rewrite^（+$/index.html到Homestead中的我的vhosts文件：

server {

    listen 80;
    listen 443 ssl;
    server_name app.myproject.dev;
    root "/home/vagrant/Code/vibecast/app.myproject.com/public";

    rewrite ^(.+)$ /index.html last;

    index index.html index.htm index.php;

    charset utf-8;

    ...

}

当我重新启动并打开页面时，会出现
500内部服务器错误

有什么我需要添加到拉雷维尔的路线吗

var router = new VueRouter({
    hashbang: false,
    history: true,
    linkActiveClass: "active"
})

在导航时，我可以在不使用#散列（或修改的主机文件）的情况下使其工作，但在重新加载页面时失败。
您需要将路由器模式设置为
html5
RE:

因此，您的新代码如下所示：

var router = new VueRouter({
    hashbang: false,
    history: true,
    linkActiveClass: "active"
})
router.mode = 'html5'

我通过Matt Stauffer的演示应用程序找到了解决方案。首先，不需要更新vhosts文件。只需将
routes.php
中的SPA/Vue.js路由更新为：

Route::get('/{vue?}', 'AppController@spa')->where('vue', '[\/\w\.-]*');

如果你有一个管理面板，不想考虑它的前缀
Route::get('/{vue?}', 'AppController@spa')->where('vue','^(?!panel).*$');


当然，还要初始化Vue.js路由器，如下所示：

const router = new VueRouter({
    history: true,
    hashbang: false,
    linkActiveClass: 'active'
})
router.mode = 'html5'

参考：
Laravel路由器

Route::any('{all}', function () {
     return view('welcome');})->where(['all' => '.*']);

Vue路由器

export default new Router({
    routes: [
        { path: '/', name: 'Home', component: HomeView },
        { path: '/category', name: 'Category', component: CategoryView },
        { path: '/topic', name: 'Topci', component: TopicView }
    ],
    mode: 'history'
})

通过进行以下更改，可以使Vue路由器和Laravel路由器很好地协同工作：

在
routes/web.php
的末尾添加下一行：

Route::get('{path}', function() {
  return view('your-vuejs-main-blade');
})->where('path', '.*');

您需要在文件末尾添加此项，因为您需要保留以前声明的laravel路由，以便正常工作，并且不会被404页或vue路由器的路径覆盖

在Vue路由器的配置中，使用以下命令：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

let router = new Router({
    mode: 'history', //removes # (hashtag) from url
    base: '/',
    fallback: true, //router should fallback to hash (#) mode when the browser does not support history.pushState
    routes: [
        { path: '*', require('../components/pages/NotFound.vue') },
        //... + all your other paths here
    ]
})
export default router

但是，在laravel和vue router之间导航时，您需要记住，将vue router的页面转到laravel页面时，必须使用
窗口.location.href
code，一个
，才能完全退出vue router的实例

使用Laravel 5.5.23、Vue 2.5.9、Vue Router 3.0.1对此进行了测试，请在Laravel web.php中添加以下行

Route::get('/{vue?}', 'App\Http\Controllers\AppController@index')->where('vue', '[\/\w\.-]*');

Vue路由器

const router = new VueRouter({
            mode: 'history',
            routes,

        })

您可以在routes文件的末尾添加一个get路由，该路由为route
'/{a？}/{b？}/{c？}/{d？}/{e？}/{f？}/{g？}/'
，这样您就可以注册api路由了。谢谢。在什么情况下，我应该在路线中添加这些内容？谢谢。实际上还不清楚如何实现它？抱歉，仍然在学习路由器：/@JackBarham添加了代码来显示它将如何使用：）啊，我现在明白了。让它工作，但现在当我刷新我得到一个“对不起，你正在寻找的网页找不到”。是否需要更新Laravel routes中的任何内容？您可能需要一个“一网打尽”功能，将您发送到启动Vue的视图中。我不熟悉拉威尔，但我在Django是这样做的：是的，听起来不错，我会看看的。顺便说一句，作为参考指南，您在该回购协议上的Vue设置非常方便；）可能，
html5
模式重命名为
history
。请参阅导出默认新路由器（{mode:'history'}）这正是我要找的。谢谢