Vue.js - 如何删除 hashbang #!从网址？

在 Vue 3 中，您希望将 createWebHistory 用于 history 选项。

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  // ...
})

在 Vue 2 中，您需要将 mode 设置为 'history'。

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

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

---

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

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

---

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

---

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 模式： “历史” | “抽象的”。

---

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

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

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

---

引用文档。

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 页面。再次漂亮！

---

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>

---

vue-router 使用 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，用户在尝试直接从浏览器访问 https://website.com/posts/3 时可能会收到 404 Error。 Vue Router Docs

---

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

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

---

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

export default new Router({
  mode: 'history',
  routes: [
    {
     ...
    }
  ]
})

---

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

如果您使用的是 AWS 放大，请查看这篇关于如何配置服务器的文章：Vue router’s history mode and AWS Amplify

---

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

在这个文件的底部：

const router = new VueRouter({
  mode: "history",
  routes,
});

---

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

Reference

---

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

---