如何在Vue.js中从URL中删除哈希（#）符号

Question

我想在Vue.js中从URL中移除哈希标记。 我正在尝试 mode：'history'， hashbang：false， history：true， linkActiveClass：“active”， 但仍然在URL中得到哈希标记。

- ShrJoshi

---

mode: "history"应该可以工作。 - Sajib Khan

将其更改为 <a href="/relativepath">Click</a> 或使用 router-link 组件应该可以正常工作。 - Riddhi

如果没有看到您的代码，很难知道问题出在哪里。请在您的问题中附上一些代码示例，包括vuejs和vue路由器配置。 - Matt

Answer 1

当初始化您的Vue路由器时，以下是使其正常工作的最基本代码：

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

然后你需要将路由器实例（这里是router）在创建Vue实例时传递：

new Vue({
  el: '#app',
  components: { App },
  template: `<App/>`,
  router
})

仅凭此设置，vue-router应该已经可以在历史模式下工作。但是，您很可能还希望向路由器实例添加路由：

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

如果您能分享一些代码，那么我们将更好地帮助您。目前，您也可以查看一个小的路由器示例（请注意浏览器URL中的路由是如何改变为“/foo”，然后变为“/bar”，没有使用哈希标记）。

- kano

---

太好了听到这个消息！很高兴能帮忙。 - kano

Answer 2

如果您正在使用Vue v3和vue-router v4，则在router.js中的此行帮助我从url中删除了井号：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

- wittgenstein

Answer 3

对于使用 Quasar Framework 的人，可以通过转到 quasar.conf.js 来移除哈希（hash）。

搜索 "build" 属性，然后设置 "vueRouterMode: 'history'"。

- Shulz