如何从url中删除hashbang？

如何#!从url中删除hashbang ？

我找到了在vue路由器文档中禁用hashbang的选项(http://vuejs.github.io/vue-router/en/options.html)但是这个选项会删除#!并且只是放入#

有没有办法让干净的网址？

例:

不: #!/home

但: /home

1> Bill Criswel..：

---

你其实只是想设置mode到'history'.

const router = new VueRouter({
  mode: 'history'
})

但请确保您的服务器已配置为处理这些链接. https://router.vuejs.org/guide/essentials/history-mode.html

---

感谢Bill在这里你可以删除hashbang false这里是代码:`const router = new VueRouter({history:true})`

---

我正在玩https://github.com/vuejs/vue-hackernews并添加`{history:true }`适用于第一页,但其余路线都失败了.

---

应该在哪个文件中添加？

2> Israel Moral..：

---

对于vue.js 2,请使用以下内容:

const router = new VueRouter({
 mode: 'history'
})

---

在认识到这是解决方案之后编辑接受的答案,您可以检查已接受答案的编辑日志.

---

这个答案和接受的答案有什么区别？

3> Tadas Stasiu..：

---

Hash是默认的vue-router模式设置,因为使用hash,应用程序不需要连接服务器来提供url.要更改它,您应配置服务器并将模式设置为HTML5 History API模式.

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

https://router.vuejs.org/guide/essentials/history-mode.html

然后你应该确保,vue路由器模式设置如下:

vue-router版本2.x.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

需要说明的是,这些都是您可以选择的vue-router模式:"hash"| "历史"| "抽象".

4> Adil H. Raza..：

---

对于Vuejs 2.5和vue-router 3.0,我上面没有任何工作,但是在玩了一下之后,以下似乎有效:

export default new Router({
  mode: 'history',
  hash: false,
  routes: [
  ...
    ,
    { path: '*', redirect: '/' }, // catch all use case
  ],
})

请注意,您还需要添加catch-all路径.

5> 小智..：

---

window.router = new VueRouter({
   hashbang: false,
   //abstract: true,
  history: true,
    mode: 'html5',
  linkActiveClass: 'active',
  transitionOnLoad: true,
  root: '/'
});

和服务器配置正确在apache中你应该写url重写

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

6> The Observer..：

---

引用文档。

vue-router的默认模式是哈希模式-它使用URL哈希来模拟完整的URL，以便在URL更改时不会重新加载页面。

为了摆脱哈希值，我们可以使用路由器的历史记录模式，该模式利用history.pushState API来实现URL导航而无需重新加载页面：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

使用历史记录模式时，URL看起来“正常”，例如 http://oursite.com/user/id。美丽！

但是，这里出现一个问题：由于我们的应用程序是单页客户端应用程序，没有正确的服务器配置，因此如果用户直接在浏览器中访问http://oursite.com/user/id，则将收到404错误。现在很丑。

不用担心：要解决此问题，您需要做的就是向服务器添加一条简单的“全部捕获”后备路由。如果该网址与任何静态资产都不匹配，则该网址应与您的应用程序所在的index.html页面相同。再次美丽！