Vue.js - 如何删除哈希邦#！从网址 - Vue.js - How to remove hashbang #! from url? 小贝子编程网

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

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

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

例：

不是：#!/home

但是：/home

谢谢！

在 Vue 3 中，您希望使用 createWebHistory 作为history选项。

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  // ...
})

在 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

哈希是默认的 vue-router 模式设置，之所以设置它，是因为使用哈希，应用程序不需要连接服务器来提供 url。要更改它，您应该配置您的服务器并将模式设置为 HTML5 历史记录 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" | "history" | "abstract"。

对于 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 错误浏览器。现在这很丑陋。
不用担心：要解决此问题，您需要做的就是添加一个简单的到服务器的 catchall 回退路由。如果网址与任何网址都不匹配静态资产，它应提供与应用相同的索引.html页面住在。再次美丽！

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>

上面的几个很好的描述让我陷入了兔子洞，直到我意识到取代"createWebHashHistory"的"createWebHistory"存在于路由器/索引文件中的两个地方.js。一次是在文件末尾的常量定义中，一次是在文件顶部从 vue-router 导入时。

在路由器/索引.js文件的末尾找到

  const router = createRouter({
    mode: 'history',
    history: createWebHistory(),
    // history: createWebHashHistory(),
    routes
  })

路由器/索引.js文件中的第一行

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

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

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

只需在路由器中将createWebHashHistory替换为createWebHistory.js file

您应该像下面这样将模式历史记录添加到路由器

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

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

如果您使用的是 AWS Amplify，

请查看这篇文章，了解如何配置服务器：Vue 路由器的历史模式和 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
   }
]

参考

在 Vue 3 中，你可以使用 vue-router 软件包提供的 createWebHistory 模块来获取一个干净的 URL。

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  // ...
})

还有另一个模块在名为createWebHashHistory的URL中保留"#"符号，这有助于浏览器导航到特定元素。

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(),
  // ...
})

您可能更喜欢使用 createWebHistory 而不是 createWebHashHistory，如果您不希望 URL 中没有"#"符号。

有关更多信息，请随时查看他们的文档：https://router.vuejs.org/guide/essentials/history-mode.html

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [],
});

export default router;

Vue.js - 如何删除哈希邦#！从网址

相关内容

最新更新

热门标签：