Vue.js-如何删除hashbang#！从url？

如何删除hashbang

#来自url

我在vue路由器文档（）中找到了禁用hashbang的选项，但该选项删除了
#
然后把
#

有什么方法可以获得干净的url吗

例如：

不是：
#/主页

但是：
/home

谢谢
 实际上，您只需要将
模式设置为
“历史记录”

const路由器=新的VueRouter({
模式：“历史”
})

不过，请确保您的服务器已配置为处理这些链接。
window.router=新的VueRouter({
哈什邦：错，
//摘要：没错，
历史：没错，
模式：“html5”，
linkActiveClass:'活动'，
transitionOnLoad：是的，
根：'/'
});

并且服务器配置正确
在apache中，您应该编写url重写

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>


重新启动发动机
重写基/
重写规则^index\.html$-[L]
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写规则/index.html[L]
对于vue.js 2，请使用以下内容：

const路由器=新的VueRouter({
模式：“历史”
})
哈希是默认的vue路由器模式设置，之所以设置它，是因为使用哈希，应用程序不需要连接服务器来提供url。要更改它，您应该配置服务器并将模式设置为HTML5历史API模式

对于服务器配置，这是帮助您设置Apache、Nginx和Node.js服务器的链接：


然后，您应该确保vue路由器模式设置如下：

vue路由器版本2.x

const路由器=新的VueRouter({
模式：“历史”，
路线：[……]
})

要明确的是，这些都是您可以选择的vue路由器模式：“散列”、“历史”、“摘要”。
引用文档

vue路由器的默认模式是哈希模式-它使用URL哈希
模拟一个完整的URL，这样当URL
变化

为了消除散列，我们可以使用路由器的历史模式
利用history.pushState API实现URL导航，而无需
重新加载页面：

const路由器=新的VueRouter({
模式：“历史”，
路线：[……]
})

使用历史记录模式时，URL将看起来“正常”，例如。
. 漂亮

但问题来了：因为我们的应用程序是单页客户端
端应用程序，如果没有正确的服务器配置，用户将获得
404错误，如果他们直接访问
浏览器这太难看了

不用担心：要解决这个问题，只需添加一个简单的
捕获到服务器的所有回退路由。如果URL与任何
静态资产，它应该提供与应用程序相同的index.html页面
生活在。又漂亮了

对于Vuejs 2.5和vue router 3.0，上面的内容对我来说都不起作用，但是，在玩了一点之后，以下内容似乎起到了作用：

导出默认新路由器({
模式：“历史”，
哈什：错，
路线：[
...
,
{path:'*'，redirect:'/'}，//捕获所有用例
],
})

请注意，您还需要添加catch-all路径。
vue路由器的默认模式是哈希模式-它使用URL哈希模拟完整URL，以便在URL更改时不会重新加载页面。
为了消除散列，我们可以使用路由器的历史模式，它利用
history.pushState
API实现URL导航，而无需重新加载页面：

从“/routes”导入{routes}//从routes.js导入路由
常量路由器=新的VueRouter({
路线，
模式：“历史”，
});
新Vue({
el:“#应用程序”，
路由器，
渲染：h=>h（应用程序）
});

routes.js

import ComponentName from./ComponentName'；
导出常量路由=[
{
路径：“/您的路径”
组件：组件名称
}
]

vue路由器使用
散列模式，简单地说，这是您通常希望从这样的achor标记中得到的

const路由器=新VueRouter({
模式：“历史”，
路线：[……]
})

如果您使用的是AWS amplify，请查看这篇关于如何配置服务器的文章：
您应该向路由器添加模式历史记录，如下所示

导出默认新路由器({
模式：“历史”，
路线：[
{
...
}
]
})
对于Vue 3，更改此选项：

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

为此：

const router = createRouter({
    history: createWebHistory(),
    routes,
});

来源：
在src->router->index.js中打开文件

在该文件的底部：

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

谢谢Bill这里你可以删除hashbang false这里的代码是：
const router=new VueRouter（{history:true}）
我在玩并添加的
{history:true}
在第一页有效，但是其余的路由失败了。你是说当你在其他路由上重新加载应用程序时？如果是这样，您需要正确配置您的服务器。请将vue.js 2信息放在应答的开头，在哪个文件中添加？此应答与此处接受的应答有什么区别？接受的应答是在意识到这是解决方案后编辑的，您可以查看已接受答案的编辑日志。虽然此代码可以提供问题的解决方案，但最好添加上下文，说明其工作原理。这可以帮助未来的用户学习，并将这些知识应用到他们自己的代码中。在解释代码时，用户可能会以投票的形式向您提供正面反馈。