当前位置：代码网 > it编程>前端脚本>Vue.js > Vue3.0路由将哈希(hash)更改为历史(history)模式

Vue3.0路由将哈希(hash)更改为历史(history)模式

2024年08月06日 • Vue.js •我要评论

路由哈希模式更换为历史模式

步骤

步骤

将路由替换为history模式
更换配置文件中配置的根路径
查找项目中存在的哈希跳转

将路由替换为history模式

import {
  createrouter,
  createwebhistory,
} from 'vue-router'

const router = createrouter({
  history: createwebhistory(), //可指定根路径
  routes,
})

更换配置文件中配置的根路径

此处为vite.config.ts

export default defineconfig({
  base: '/', // 设置打包路径
})

查找项目中存在的哈希跳转

全局搜索

 (`#/ 替换为 (`/

若存在 location.replace 需替换成 router.replace 否则页面会刷新

[Vue+Element UI] v-infinite-scroll 无限滚动使用总结

pageSize 设置要超过当前页面显示数据量, 滚动功能才不会出bug。若结合tab页使用, 注意要在切换回调事件里重置数据再请求数据。 [阅读全文]
我是怎么解决：写Vue3组件库时遇到的一个和 github 还没有 Close 的 issue 一样的问题:Argument of type ‘{ install: (app: App＜any＞..

本文是我在组件库打包时，遇到的一个插件导出使用报类型错误问题，主要记录自己的解决思路，在此希望对大家有帮助。 [阅读全文]
【vue组件库搭建07】Vitest单元测试

使用Vitest 和 vue-test-utils进行单元测试 [阅读全文]
Vue 组件单元测试深度探索：细致解析与实战范例大全

本文全面的介绍了 Vue 组件单元测试应该涵盖主要方面：组件挂载与渲染、Props 接收与响应、数据模型（Data）、计算属性（Computed）、方法（Met... [阅读全文]
Vue中webSocket+webRtc实现多人会议，webRtc实现

已经搭建好`websocket`双端通信（可以先模拟），用于实时交换双方信息。交换的信息也就是所谓的信令。实现`webRtc`进行多人会议，屏幕共享、摄像头共享... [阅读全文]
Mars3D手把手开发教程（vue3）

优化提升与B/S架构设计，支持多行业扩展的轻量级高效能GIS开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与使用多种GIS数据和三维模型，呈现三维空间的可视化，完成…

2024年08月06日 • 前端脚本