在 Laravel Homestead 中使用 Vue.js 时从 URL 中删除 # 哈希

Question

我有一个在 Homestead 中运行的 Laravel 5.2 安装程序，并使用 Vue.js 路由器构建一个 SPA。我试图从我知道可以完成的 URL 中完全删除 #hash，但我不断收到错误消息：

我已经将 rewrite ^(.+)$ /index.html last; 添加到我在 Homestead 的虚拟主机文件中：

 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 Internal Server Error 。

我需要在 Laravel 的路由中添加什么吗？

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

在四处导航时，我可以在没有#hash（或修改后的主机文件）的情况下使用它，但在我重新加载页面时失败。

原文由 Jack Barham 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我设法通过 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'

参考： https ://github.com/mattstauffer/suggestive/blob/master/app/Http/routes.php#L9

原文由 Jack Barham 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

您需要在文件末尾添加它，因为您需要保留之前声明的 laravel 路由才能正常工作并且不会被 404 页面或 vue-router 的路径覆盖。

在您的 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 页面，您必须使用 window.location.href 代码， <a> 标签或某种 编程导航 以完全退出 Vue-router 的实例。

使用 Laravel 5.5.23、Vue 2.5.9、Vue-Router 3.0.1 对此进行了测试

原文由 aki 发布，翻译遵循 CC BY-SA 3.0 许可协议