如何删除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?
例子:
不是:# !/家庭
但是:/家庭
谢谢!
当前回答
对于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
其他回答
对于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,
});
window.router = new VueRouter({
hashbang: false,
//abstract: true,
history: true,
mode: 'html5',
linkActiveClass: 'active',
transitionOnLoad: true,
root: '/'
});
服务器配置正确 在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>
上面的几个很好的描述把我带进了兔子洞,直到我意识到“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'
现在它就像一个魅力,感谢上面所有的人指引我走上这条成功之路!
对于vue.js 2,使用以下方法:
const router = new VueRouter({
mode: 'history'
})