如何删除hashbang #!从url ?

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

有没有办法有干净的url?

例子:

不是:# !/家庭

但是:/家庭

谢谢!


当前回答

在Vue 3中,您可以使用Vue -router包提供的createWebHistory模块来获得一个干净的URL。

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

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

还有另一个模块在名为createWebHashHistory的URL中保存“#”符号,它帮助浏览器导航到特定的元素。

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

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

如果你不想在URL中使用'#'符号,你可能更喜欢使用createWebHistory而不是createWebHashHistory。

要了解更多信息,请查看他们的文档: https://router.vuejs.org/guide/essentials/history-mode.html

其他回答

在Vue 3中,您可以使用Vue -router包提供的createWebHistory模块来获得一个干净的URL。

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

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

还有另一个模块在名为createWebHashHistory的URL中保存“#”符号,它帮助浏览器导航到特定的元素。

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

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

如果你不想在URL中使用'#'符号,你可能更喜欢使用createWebHistory而不是createWebHashHistory。

要了解更多信息,请查看他们的文档: https://router.vuejs.org/guide/essentials/history-mode.html

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>

vue-router使用哈希模式,简单地说,它是您通常期望从这样的achor标记中得到的东西。

<a href="#some_section">link<a>

使散列消失

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
] // Routes Array
const router = new VueRouter({
  mode: 'history', // Add this line
  routes
})

警告:如果您没有正确配置服务器,或者您正在使用客户端SPA用户,可能会得到404错误 如果他们试图直接从浏览器访问https://website.com/posts/3。 Vue路由器文档

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

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

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

在这个文件的底部:

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