如何删除hashbang #!从url ?

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

有没有办法有干净的url?

例子:

不是:# !/家庭

但是:/家庭

谢谢!


当前回答

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

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

其他回答

散列是vue-router模式的默认设置,之所以设置它是因为使用散列,应用程序不需要连接服务器来提供url。要改变它,你应该配置你的服务器,并将模式设置为HTML5 History API模式。

对于服务器配置,这是帮助你设置Apache, Nginx和Node.js服务器的链接:

https://router.vuejs.org/guide/essentials/history-mode.html

然后你应该确保,vue路由器模式设置如下:

Vue-router version 2.x

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

需要明确的是,这些都是你可以选择的vue-router模式:"hash" | "history" | "abstract"。

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

在这个文件的底部:

const router = new VueRouter({
  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'
})
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>