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

【问题标题】：Vue.js - 如何删除 hashbang #!从网址？
【发布时间】：2016-04-09 23:52:36
【问题描述】：

如何从 url 中删除 hashbang #!？

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

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

例子：

不是：#!/home

但是：/home

谢谢！

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

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

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

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

【讨论】：

谢谢比尔在这里你也可以删除 hashbang false 这里是代码：const router = new VueRouter({ history: true })
我在玩github.com/vuejs/vue-hackernews 并添加{history: true} 适用于第一页，但其余路线都失败了。
你的意思是当你在其他路线上重新加载应用程序时？如果是这样，您需要正确配置您的服务器。
请把vue.js 2的信息放在回答的开头
这段代码是放在Router文件夹的index.js中还是放在主App.vue中？

【解决方案2】：

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

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

【讨论】：

这个答案和这里接受的答案有什么区别？
在意识到这是解决方案后编辑了接受的答案，您可以查看接受的答案的编辑日志。

【解决方案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” | “历史” | “抽象”。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案6】：

引用文档。

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 页面住在里面。美丽，再次！

【讨论】：

【解决方案7】：

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>

【讨论】：

【解决方案8】：

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 用户可能会得到一个404 Error 如果他们尝试直接从浏览器访问https://website.com/posts/3。 Vue Router Docs

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

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

在这个文件的底部：

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

【讨论】：

【解决方案13】：

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

routes.js

import ComponentName from './ComponentName';

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

Reference

【讨论】：

虽然此代码可能会为问题提供解决方案，但最好添加有关其工作原理/方式的上下文。这可以帮助未来的用户学习并将这些知识应用到他们自己的代码中。解释代码时，您也可能会以赞成票的形式从用户那里获得积极的反馈。

【解决方案14】：

只需将 router.js 文件中的 createWebHashHistory 替换为 createWebHistory 即可

【讨论】：