如何从Vue JS中的URL删除hasbang

Question

我想从Vue JS中的网址中删除hashbang  我在尝试  模式：“历史”，   hashbang：false，   历史：是的，   linkActiveClass：“活动”， 但仍然在网址中散列

Answer 1

初始化Vue路由器时，这是使其正常工作的最低限度代码：

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

然后，您需要在创建时将路由器实例（此处为router）传递给您的Vue实例：

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

仅通过此设置，vue-router就应该已经在history mode中工作。但是，很可能您还希望将路由添加到路由器实例：

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

如果您可以共享一些代码，那么它将大大有助于我们进一步帮助您。

目前，您还可以检查一个小的router example（注意浏览器URL中的路由如何更改为/foo，然后更改为/bar，不带哈希）。

Answer 2

如果您使用的是 Vue v3 和 vue-router v4，router.js 中的这一行帮助我从 url 中删除了主题标签：

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

Answer 3

对于那些使用 Quasar Framework hash 的人可以通过转到 quasar.conf.js

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