Vue.js -如何删除hashbang #!从url ?

如何删除hashbang #!从url ?

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

有没有办法有干净的url?

例子:

不是:# !/家庭

但是:/家庭

谢谢!

当前回答

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

如果您正在使用AWS amplify，请查看关于如何配置服务器的本文:Vue路由器的历史模式和AWS amplify

其他回答

上面的几个很好的描述把我带进了兔子洞，直到我意识到“createWebHistory”取代了“createWebHashHistory”存在于router/index.js文件的两个地方。一次是在文件末尾的常量定义中，一次是在文件顶部的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'

现在它就像一个魅力，感谢上面所有的人指引我走上这条成功之路!

你应该添加模式历史到你的路由器如下所示

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

对于Vuejs 2.5和vue-router 3.0，以上都不适合我，但是在玩了一会儿之后，以下似乎是有效的:

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

注意，您还需要添加catch-all路径。

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

推荐文章