在 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（或修改后的主机文件）的情况下使用它，但是当我重新加载页面时失败。

Answer 1

您需要将路由器模式设置为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 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

Laravel路由器

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

查看路由器

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 4

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

使用 Laravel 5.5.23、Vue 2.5.9、Vue-Router 3.0.1

进行了测试

Answer 5

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

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

Vue 路由器

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

        })

Answer 6

导出默认新路由器({ 模式：'history', // https://router.vuejs.org/api/#mode linkActiveClass: 'active', })

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

Remove the # hash from URL when using Vue.js in Laravel Homestead

javascript

routing

laravel

vue.js

homestead