如何删除hashbang #!从url ?
我在vue路由器文档(http://vuejs.github.io/vue-router/en/options.html)中找到了禁用hashbang的选项，但这个选项删除了#!然后输入#
有没有办法有干净的url?
例子:
不是:# !/家庭
但是:/家庭
谢谢!
当前回答
对于Vuejs 2.5和vue-router 3.0，以上都不适合我，但是在玩了一会儿之后，以下似乎是有效的:
export default new Router({
mode: 'history',
hash: false,
routes: [
...
,
{ path: '*', redirect: '/' }, // catch all use case
],
})
注意，您还需要添加catch-all路径。
其他回答
你应该添加模式历史到你的路由器如下所示
export default new Router({
mode: 'history',
routes: [
{
...
}
]
})
vue-router使用哈希模式，简单地说，它是您通常期望从这样的achor标记中得到的东西。
<a href="#some_section">link<a>
使散列消失
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
] // Routes Array
const router = new VueRouter({
mode: 'history', // Add this line
routes
})
警告:如果您没有正确配置服务器，或者您正在使用客户端SPA用户，可能会得到404错误 如果他们试图直接从浏览器访问https://website.com/posts/3。 Vue路由器文档
打开src->router->index.js文件
在这个文件的底部:
const router = new VueRouter({
mode: "history",
routes,
});
只需将router.js文件中的createWebHashHistory替换为createWebHistory
上面的几个很好的描述把我带进了兔子洞，直到我意识到“createWebHistory”取代了“createWebHashHistory”存在于router/index.js文件的两个地方。一次是在文件末尾的常量定义中，一次是在文件顶部的vue-router导入中。
在router/index.js文件的末尾找到
const router = createRouter({
mode: 'history',
history: createWebHistory(),
// history: createWebHashHistory(),
routes
})
router/index.js文件的第一行
import { createRouter, createWebHistory } from 'vue-router'
// import { createRouter, createWebHashHistory } from 'vue-router'
现在它就像一个魅力，感谢上面所有的人指引我走上这条成功之路!
