Vue.js

Question

如何从 url 中删除 hashbang #!？

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

有什么办法可以干净url？

示例：

不是：#!/home

但是：/home

谢谢！

Answer 1

在 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

Answer 2

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 3

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

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

Answer 4

Hash 是默认的 vue-router 模式设置，设置它是因为使用 hash，应用程序不需要连接服务器来服务 url。要更改它，您应该配置您的服务器并将模式设置为 HTML5 历史记录 API 模式。

对于服务器配置，这是 link 来帮助您设置 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 5

引用文档。

The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.

To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:

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

When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful!

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

Answer 6

对于 Vuejs 2.5 和 vue-router 3.0，上面的任何东西都不适合我，但是在玩了一会儿之后，以下似乎可行：

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

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

Answer 7

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

Answer 9

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

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

Answer 10

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

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

Answer 11

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

Answer 12

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

在此文件的底部：

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

Answer 13

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

Answer 14

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

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

Vue.js - 如何删除 hashbang #!来自 url？

Vue.js - How to remove hashbang #! from url?

vue-router