Vue.js 路由 mode 配置:去除 URL 默认 # 号的方法

作者:青团子

时间:2026-10-23

浏览:395

本文介绍如何在 Vue.js 中通过配置路由的 mode 属性,将默认的 hash 模式切换为 history 模式,从而去除 URL 地址栏中默认的 # 符号。详细说明了 hash、history 和 abstract 三种模式的区别及适用场景,并提供了具体的代码配置示例。

文章目录

去除 Vue.js 路由 URL 默认 # 号的方法

例如访问地址 http://localhost:8080/#/login,可以看到路由路径中默认包含一个 # 符号。

若希望移除 URL 中的 # 号,只需将路由配置中的 mode 属性值从默认的 'hash' 修改为 'history' 即可实现。

具体配置参考 router.js 文件。


import Router from 'vue-router'
import routers from './routers'

export default () => {
  return new Router({
    routers,
    mode: 'history' // 加上这个配置项,url默认的 # 就不会出现了
  })
}

关于 mode 参数的详细说明如下:

默认值为 'hash'(适用于浏览器环境)或 'abstract'(适用于 Node.js 环境)。

该参数可选的值包括:'hash'、'history' 或 'abstract'。

hash 模式:利用 URL 的 hash 值来管理路由。此模式兼容性最好,支持所有浏览器,包括那些不支持 HTML5 History API 的旧版浏览器。

history 模式:依赖 HTML5 History API 以及相应的服务器配置。如需了解官方关于 HTML5 History 模式的详细说明,可查阅相关文档。

abstract 模式:支持所有 JavaScript 运行环境,例如 Node.js 服务器端。当检测到当前环境没有浏览器 API 时,路由会自动强制切换至此模式。

以上即为 Vue.js 路由 mode 配置去除 URL 默认 # 号的全部内容,希望对读者有所帮助,欢迎继续支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章