vue面试题：路由模式你知道哪些

📌大前端入门到精通 专栏正在持续更新中，案例的原理图解析、各种模块分析💖这里都有哦，同时也欢迎大家订阅专栏，获取更多详细信息哦✊✊✊
✨个人主页：零小唬的博客主页
🥂欢迎大家 👍点赞 📨评论 🔔收藏
✨作者简介：20级计算机专业学生一枚，来自宁夏，可能会去做大前端，目前还在努力学习并记录博客中🧸
🎀本系列专栏: 大前端入门到精通
💕希望本文对你在学习前端的过程中有所帮助，如有不足请指正一起学习，一起进步🥇
⛪座右铭：只要你还愿意努力，世界一定会给你惊喜

---

Vue中的路由模式是通过Vue Router实现的，它允许我们构建单页应用，实现SPA（Single Page Application）的效果。

---

两种常见的路由模式是：哈希模式（Hash Mode）和历史模式（History Mode）

---

哈希模式（Hash Mode）

• 在哈希模式下，URL中会出现类似#的哈希符号,例如：http://www.example.com/#/home
• 当URL发生变化时，页面不会重新加载，而是通过监听hashchange事件来实现路由的切换
• 优点是兼容性好，可以支持老版本浏览器；缺点是URL不够干净，不够语义化

历史模式（History Mode）

• 在历史模式下，URL中不会出现哈希符号（#），而是直接使用传统的路径格式，例如：http://www.example.com/home
• 使用HTML5 History API来管理路由，可以通过浏览器的前进、后退按钮实现路由的切换
• 优点是URL干净、语义化，更符合传统网站的URL格式；缺点是需要服务端配合，以处理在刷新页面时的路由问题

在Vue中，配置路由模式的方式也略有不同：

• Vue 2中，需要在创建Vue Router实例时显式地指定路由模式

export default new VueRouter({
    mode: 'hash',//设置路由模式
    base: process.env.BASE_URL,
    routes
})

• Vue 3中，可以通过createWebHistory和createWebHashHistory等函数来创建路由模式对应的实例

import { createRouter, createWebHistory , createWebHashHistory } from "vue-router";
export default createRouter({
    history: createWebHistory(),//定义history模式url不带#
    history: createWebHashHistory(),//定义hash模式
    routes: [],
});	

---

🎉记录是为了不停的思考，创作更是为了更好的思考，有人说过：2023年以后的中国市场将永远属于长期主义者，bug是改不完的，只能说这次遇到了希望下次不会在出现同样的bug就行，如果你觉得对您有帮助，欢迎一起交流学习，本人也是一名很菜的20级学生，编程界的小白，一起加油变优秀啦！