329

如何#!从 url 中删除 hashbang？

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

有什么办法可以让网址干净吗？

例子：

不是：#!/home

但：/home

谢谢！

4

14 回答 14

594

您实际上只想设置mode为'history'.

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

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

于 2016-01-06T02:47:44.047 回答
109

对于 vue.js 2，请使用以下内容：

const router = new VueRouter({
 mode: 'history'
})
于 2016-11-19T02:12:52.707 回答
35

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

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

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

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

vue 路由器版本 2.x

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

需要明确的是，这些都是你可以选择的 vue-router 模式：“历史” | “抽象的”。

于 2017-09-25T17:18:14.220 回答
31

对于 Vuejs 2.5 和 vue-router 3.0，上面没有任何东西对我有用，但是在玩了一点之后，以下似乎工作：

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

请注意，您还需要添加包罗万象的路径。

于 2018-08-09T09:19:55.357 回答
21

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

于 2020-11-21T14:43:43.763 回答
16

引用文档。

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 错误。现在这很难看。

不用担心：要解决此问题，您需要做的就是向您的服务器添加一个简单的包罗万象的后备路由。如果 URL 不匹配任何静态资源，它应该提供与您的应用程序相同的 index.html 页面。再次漂亮！

于 2018-07-14T13:54:54.140 回答
13 
window.router = new VueRouter({
   hashbang: false,
   //abstract: true,
  history: true,
    mode: 'html5',
  linkActiveClass: 'active',
  transitionOnLoad: true,
  root: '/'
});

并且服务器已正确配置在 apache 中，您应该编写 url rewrite

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>
于 2016-06-13T14:28:20.267 回答
5

vue-routeruses ，简单来说，这hash-mode是您通常期望从这样的 achor 标签中获得的东西。

<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 路由器文档

于 2020-04-03T15:23:59.920 回答
3

上面的几个很好的描述让我陷入了兔子洞，直到我意识到在 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'

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

于 2021-12-02T15:17:41.730 回答
2

您应该向路由器添加模式历史记录，如下所示

export default new Router({
  mode: 'history',
  routes: [
    {
     ...
    }
  ]
})
于 2020-07-01T10:30:34.977 回答
2 
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

如果您使用的是 AWS Amplify，请查看这篇关于如何配置服务器的文章：Vue 路由器的历史模式和 AWS Amplify

于 2020-05-24T07:44:37.493 回答
1

在 src->router->index.js 打开文件

在这个文件的底部：

const router = new VueRouter({
  mode: "history",
  routes,
});
于 2021-01-05T22:11:32.820 回答
0

只需在 router.js 文件中将 createWebHashHistory 替换为 createWebHistory

于 2021-10-26T08:28:52.260 回答
0

vue-router 的默认模式是哈希模式——它使用 URL 哈希来模拟一个完整的 URL，这样当 URL 发生变化时页面就不会重新加载。为了摆脱散列，我们可以使用路由器的历史模式，它利用history.pushStateAPI 实现 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)
});

路由.js

import ComponentName from './ComponentName';

export const routes = [
   {
      path:'/your-path'
      component:ComponentName
   }
]

参考

于 2020-03-16T12:31:39.290 回答