如何删除hashbang #!从url ?
我在vue路由器文档(http://vuejs.github.io/vue-router/en/options.html)中找到了禁用hashbang的选项，但这个选项删除了#!然后输入#
有没有办法有干净的url?
例子:
不是:# !/家庭
但是:/家庭
谢谢!
当前回答
引用文档。
vue-router的默认模式是哈希模式-它使用URL哈希来 模拟一个完整的URL，这样页面将不会被重新加载的URL 的变化。 为了摆脱散列，我们可以使用路由器的历史模式 利用历史。pushState API实现URL导航 页面重载:
const router = new VueRouter({
mode: 'history',
routes: [...]
})
When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful! Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly. Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!
其他回答
对于Vue 3，更改如下:
const router = createRouter({
history: createWebHashHistory(),
routes,
});
对此:
const router = createRouter({
history: createWebHistory(),
routes,
});
来源:https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode
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路由器文档
对于vue.js 2，使用以下方法:
const router = new VueRouter({
mode: 'history'
})
在Vue 3中，您可以使用Vue -router包提供的createWebHistory模块来获得一个干净的URL。
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
// ...
})
还有另一个模块在名为createWebHashHistory的URL中保存“#”符号，它帮助浏览器导航到特定的元素。
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
// ...
})
如果你不想在URL中使用'#'符号，你可能更喜欢使用createWebHistory而不是createWebHashHistory。
要了解更多信息，请查看他们的文档: https://router.vuejs.org/guide/essentials/history-mode.html
const router = new VueRouter({
mode: 'history',
routes: [...]
})
如果您正在使用AWS amplify，请查看关于如何配置服务器的本文:Vue路由器的历史模式和AWS amplify
