如何删除hashbang #!从url ?
我在vue路由器文档(http://vuejs.github.io/vue-router/en/options.html)中找到了禁用hashbang的选项，但这个选项删除了#!然后输入#
有没有办法有干净的url?
例子:
不是:# !/家庭
但是:/家庭
谢谢!
当前回答
只需将router.js文件中的createWebHashHistory替换为createWebHistory
其他回答
只需将router.js文件中的createWebHashHistory替换为createWebHistory
对于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的默认模式是哈希模式——它使用URL哈希来模拟完整的URL，这样当URL更改时页面就不会被重新加载。 为了摆脱散列，我们可以使用路由器的历史模式，它利用了历史。pushState API实现URL导航，而不需要重新加载页面:
import {routes} from './routes'; //import the routes from routes.js
const router = new VueRouter({
routes,
mode: "history",
});
new Vue({
el: '#app',
router,
render: h => h(App)
});
routes.js
import ComponentName from './ComponentName';
export const routes = [
{
path:'/your-path'
component:ComponentName
}
]
参考
对于Vuejs 2.5和vue-router 3.0，以上都不适合我，但是在玩了一会儿之后，以下似乎是有效的:
export default new Router({
mode: 'history',
hash: false,
routes: [
...
,
{ path: '*', redirect: '/' }, // catch all use case
],
})
注意，您还需要添加catch-all路径。
在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
