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

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

本文关键字：URL 时从 删除 js 哈希 Vue Laravel Homestead      更新时间：2023-09-26

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

我已经在 Homestead 的 vhosts 文件中添加了rewrite ^(.+)$ /index.html last;：

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.

我需要在拉拉维尔的路线中添加什么吗？

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

时，我可以在没有 #hash（或修改后的主机文件）的情况下让它工作，但在重新加载页面时失败。

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

在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 对此进行了测试

我设法通过Matt Stauffer的演示应用程序找到了解决方案。首先，无需更新虚拟主机文件。只需要将 SPA/Vue.js 路由更新为 routes.php：

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 RE： http://vuejs.github.io/vue-router/en/api/properties.html

所以你的新代码会像：

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

导出默认的新路由器（{模式： "历史"，//https://router.vuejs.org/api/#modelinkActiveClass： 'active'，})

Laravel路由器

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

Vue-router

export default new Router({
    routes: [
        { path: '/', name: 'Home', component: HomeView },
        { path: '/category', name: 'Category', component: CategoryView },
        { path: '/topic', name: 'Topci', component: TopicView }
    ],
    mode: 'history'
})

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

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

Vue-Router

const router = new VueRouter({
            mode: 'history',
            routes,
        })
相关文章：