如何删除hashbang #!从url ?

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

有没有办法有干净的url?

例子:

不是:# !/家庭

但是:/家庭

谢谢!


当前回答

对于vue.js 2,使用以下方法:

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

其他回答

在Vue 3中,你需要使用createWebHistory作为历史选项。

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

const router = createRouter({
  history: createWebHashHistory(),
  // ...
})

在Vue 2中,你需要将模式设置为“历史”。

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

但是,请确保您的服务器配置为处理这些链接。 https://router.vuejs.org/guide/essentials/history-mode.html

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

vue-router的默认模式是哈希模式——它使用URL哈希来模拟完整的URL,这样当URL更改时页面就不会被重新加载。 为了摆脱散列,我们可以使用路由器的历史模式,它利用了历史。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
   }
]

参考

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

在这个文件的底部:

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

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

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