hash更换为history模式更换需要修改2个地方:

1.在src\config\index.js文件中添加或修改一下

// 从history改成hash 添加的
  assetsPublicPath: '/',

2.修改src\router\index.js文件下,将history改成hash

const router = new Router({
  routes,
  // mode: 'history'
  mode: 'hash'
})

效果展示

http://localhost:8080/#/xxx/aaa/ppp
在端口后,‘#’前 ,的地址可以更改变,路由跳转不会变
例如
http://localhost:8080/assdsdas#/xxx/aaa/ppp
这跳转的还是 上边那个地址的页面

对于history和hash的两种模式的介绍

history模式

即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

hash模式

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

Logo

前往低代码交流专区

更多推荐