在Laravel Homestead中使用Vue.js时,从URL中删除#hash

Question

我在Homestead运行了一个Laravel 5.2设置,并使用Vue.js路由器构建SPA.我正在尝试从URL中完全删除#hash,我知道可以完成,但我不断收到错误:

我已添加rewrite ^(.+)$ /index.html last;到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 Internal Server Error.

我需要在Laravel的路线上添加什么吗？

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

我可以在导航时不使用#hash(或修改后的主机文件)使其工作,但在重新加载页面时失败.

Answer 1

我通过Matt Stauffer的演示应用程序找到了解决方案.首先,无需更新vhosts文件.只需将SPA/Vue.js路线更新routes.php为:

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

当然,如下所示初始化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

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中进行了测试