如何删除hashbang #!从url ?
我在vue路由器文档(http://vuejs.github.io/vue-router/en/options.html)中找到了禁用hashbang的选项,但这个选项删除了#!然后输入#
有没有办法有干净的url?
例子:
不是:# !/家庭
但是:/家庭
谢谢!
如何删除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路径。
其他回答
const router = new VueRouter({
mode: 'history',
routes: [...]
})
如果您正在使用AWS amplify,请查看关于如何配置服务器的本文:Vue路由器的历史模式和AWS amplify
对于Vuejs 2.5和vue-router 3.0,以上都不适合我,但是在玩了一会儿之后,以下似乎是有效的:
export default new Router({
mode: 'history',
hash: false,
routes: [
...
,
{ path: '*', redirect: '/' }, // catch all use case
],
})
注意,您还需要添加catch-all路径。
打开src->router->index.js文件
在这个文件的底部:
const router = new VueRouter({
mode: "history",
routes,
});
只需将router.js文件中的createWebHashHistory替换为createWebHistory
在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