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

Posted 2023-03-14

【中文标题】从 Vue JS + Laravel 中的 URL 中删除哈希

【英文标题】：Removing the hash from the URL in Vue JS + Laravel

【发布时间】：2021-10-04 15:46:31

【问题描述】：

我正在使用 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', '.*');

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

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

【讨论】：

嗨 Nigel，如果我没记错的话（我已经很久没有使用 larvel 了）使用 import Foobar from './pages/Foobar '; 不是正确的方法......而是在每条路线上使用 ` 组件: () => import("./pages/Foobar.vue")`

这里是新手，仍在探索 vue 路线 XD。我已经改变了我的路线，我的mode 在历史上。这就是我如何在我的routes.jsimport Login from './pages/Login';path: '/admin', component: Login, meta: requiresAuth: false, 中声明每条路径以及如何将我的routes.js 导入app.jsimport routes from './routes';

注意，让我试试。希望一切顺利。

我这样做了，但错误仍然相同。您认为我需要更改更多文件吗？