从 Vue JS + Laravel 中的 URL 中删除哈希

Question

我正在使用 laravel 和 vue js 开发一个应用程序，我正在尝试从我的 URL 中删除 #。通常我的网址看起来像这样。

http://localhost/foo/?#/admin 

使用App.js 进行这些设置

const router = new VueRouter({
  routes: routes,
});

还有web.php

Route::get('/', function () {
  return view('base');
});

但是在更改了这些设置之后。我得到了这样的预期网址。 http://localhost/foo/admin。但问题是页面没有加载或渲染，基本上我的页面变成了空白页面。

使用App.js的设置

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

还有web.php

Route::get('/{any}', function () {
    return view('base');
})->where('any', '.*');

我遵循了从不同论坛获得的每个解决方案，但它似乎对我不起作用。

Answer 1

首先确保您处于历史模式

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

动态导入所有路线

例如

import HelloWorld from "./views/HelloWorld.vue"

变成

{
   path: "/login",
   name: "login",
   component: () => import("./views/HelloWorld.vue")
}

在app.vue

确保您的 <router-view> 组件绑定到一个键

<router-view :key="$route.fullPath"></router-view>

我还建议在 routes.js 文件的末尾添加一个 dynamic route，以捕获任何 404 错误。