如何从url中删除hashbang？

Question

如何#!从url中删除hashbang ？

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

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

例:

不: #!/home

但: /home

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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"| "历史"| "抽象".

Answer 4

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

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

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

Answer 5

对于 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

Answer 6

上面的几个很好的描述让我陷入了困境，直到我意识到 router/index.js 文件中的两个位置存在替换“createWebHashHistory”的“createWebHistory”。一次在文件末尾定义常量，一次在文件顶部从 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'

现在它就像一个魅力，谢谢上面所有带领我走上成功之路的人！

Answer 7

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>

Answer 8

引用文档。

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页面相同。再次美丽！

Answer 9

的vue-router用途hash-mode，用通俗的话它的东西，你通常会从这样的阿克尔标签的期望。

<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
})

Warning：如果您没有正确配置的服务器，或者您使用的是客户端 SPA 用户，404 Error 如果他们尝试https://website.com/posts/3直接从他们的浏览器访问，他们可能会得到一个。 Vue 路由器文档