从官方文档查看开启HTML5(createWebHistory) 模式,需要服务器的支持,各种服务器设置信息可以查看:https://router.vuejs.org/zh/guide/essentials/history-mode.html
本人用thinkphp8多应用模式(不管多应用还是单应用模式都可以)设置模块路由也可以支持vue-router使用HTML5(createWebHistory) 模式。
thinkphp8路由知识可以查看:
https://doc.thinkphp.cn/v8_0/miss_route.html
只需要3步:
第一步,在模块路由下设置
Route::miss('Index/index');
这一步的用法就是在该模块下找不到合适的路由就返回Index控制器中的index()方法,该方法就是返回渲染vue3需要的入口文件。
第二步,在主页面中(上面说的入口文件)<head></head>之间加入设置
<base href="/{:app('http')->getName()}/">
这一步的用法是设置vue-router路由时可以自动加上当前应用名,{:app('http')->getName()}是thinkphp8在模版中获得当前应用名的写法。
第三步,设置vue-router模式
history: createWebHistory()
这种模式下,可以看到浏览器地址的变化,并且不需要#号的支持,就可以在单页面做出多地址的效果。