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

Posted 2023-03-14

【中文标题】在 Laravel Homestead 中使用 Vue.js 时从 URL 中删除 # 哈希

【英文标题】：Remove the # hash from URL when using Vue.js in Laravel Homestead

【发布时间】：2016-05-04 16:07:12

【问题描述】：

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

【问题讨论】：

您可以在路由文件的末尾添加一条获取路由，并将其作为路由'/a?/b?/c?/d?/e?/f?/g?/'，这样您就可以在它之前注册 api 路由。

谢谢。在什么情况下我应该在路线中添加它？

【参考方案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 对此进行了测试

【讨论】：

这正是我想要的。谢谢！

【参考方案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

【讨论】：

可能，html5 模式重命名为history。见router.vuejs.org/en/essentials/history-mode.htmlexport default new Router(mode: 'history' );

【参考方案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'

【讨论】：

谢谢。实际上不清楚如何实现它？抱歉，还在学习路由器：/

@JackBarham 添加了代码来展示它的使用方式:)

啊，我现在明白了。得到它的工作，但现在当我刷新时，我得到一个“对不起，你正在寻找的页面找不到”。 Laravel 路由中是否需要更新任何内容？

您可能需要捕获所有信息，将您发送到您启动 Vue 的视图。我不熟悉 Laravel，但我在 Django 中是这样做的：github.com/dan-gamble/fifa/blob/develop/fifa/urls.py#L19

是的，听起来不错，我会检查一下。顺便说一句，你在那个 repo 上的 Vue 设置作为参考指南真的很方便；）

【参考方案4】：

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

【参考方案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'
)

【参考方案6】：

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

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

Vue-路由器

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

        )