Question

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

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

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

示例：

不：#!/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

哈希是默认的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模式：“hash”| “历史”| “抽象”。

Answer 4

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>

Answer 5

对于Vuejs 2.5和vue-router 3.0，上面的内容对我来说都不起作用，但是经过一番尝试之后，以下内容似乎可以起作用：

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

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

Answer 6

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

Answer 7

报价文档。

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 8

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

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

Answer 9

您应该像下面那样向路由器添加模式历史记录

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

Answer 10

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

在这个文件的底部：

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

Answer 11

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

Answer 12

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

如何从url中删除hashbang？

12 个答案: