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

如何删除hashbang #!从url ?

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

有没有办法有干净的url?

例子:

不是:# !/家庭

但是:/家庭

谢谢!

当前回答

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>

2016-06-13 14:28:20

其他回答

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

在这个文件的底部:

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

2021-01-05 22:11:32

在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

2016-01-06 02:47:44

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>

2016-06-13 14:28:20

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

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

2020-05-24 07:44:37

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

2021-10-26 08:28:52

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

推荐文章

最新文章

标签