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

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

您可以通过以下更改使 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> 标签或某种 @987654321 @ 为了完全退出 Vue-router 的实例。

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

Answer 2

我已经通过 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

Answer 3

您需要将路由器模式设置为html5 RE: http://vuejs.github.io/vue-router/en/api/properties.html

所以你的新代码会是这样的：

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

Answer 4

导出默认新路由器（{ mode: '历史', // https://router.vuejs.org/api/#mode 链接ActiveClass：'活动'， })

Answer 5

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'
})

Answer 6

将以下行添加到您的 Laravel web.php

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

Vue-路由器

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

        })