如何从网址中删除hashbang？

如何#!从网址中删除hashbang ？

我在vue路由器文档（http://vuejs.github.io/vue-router/en/options.html）中找到了禁用hashbang的选项，但此选项已删除#!，只是放在#

有什么办法可以清理网址？

例：

不： #!/home

但： /home

您实际上只想设置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-router模式设置，其设置是因为使用哈希，应用程序不需要连接服务器即可提供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模式，您可以选择：“历史” | “抽象”。

对于Vuejs 2.5和vue-router 3.0，上面的内容对我没有用，但是经过一番尝试之后，以下内容似乎可以正常工作：

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

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

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>

引用文档。

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

简而言之，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路由器文档

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

routes.js

import ComponentName from './ComponentName';

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

参考

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

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