阿珊详解Vue路由的两种模式:hash模式与history模式

news/2024/4/24 14:53:10/文章来源:https://blog.csdn.net/weixin_42554191/article/details/136546714

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

    • 摘要:
    • 引言:
    • 正文:
      • 1. 🔧 hash模式
      • 2. 🔧 history模式
      • 3. 🔧 两种模式的对比
    • 🌟 总结
    • 参考资料:

摘要:

🤔 Vue路由提供了两种模式:hash模式与history模式。本文将介绍这两种模式的特点与使用场景,帮助读者更好地掌握Vue路由的配置与应用。👩‍💻

引言:

🌈 Vue.js框架以其简洁的语法和声明式的数据绑定而受到开发者的喜爱。在单页面应用(SPA)中,路由管理是不可或缺的功能。Vue路由提供了两种模式:hash模式与history模式,以满足不同的开发需求。在这篇文章中,我将带你探究这两种模式的特点和应用,以期帮助你更好地运用Vue路由。🚀

正文:

1. 🔧 hash模式

在 web 开发中,hash 模式是一种页面跳转的方式,它不会改变浏览器的 URL,但页面会重新加载。

hash 模式的 URL 后面会跟一个 #,例如:http://example.com/#about

在 Vue 项目中,hash 模式通常用于前端路由。Vue 前端路由使用 hash 模式,是因为 hash 模式不需要后端支持,而且可以在不改变 URL 的同时实现页面跳转和数据更新。

Vue 项目使用 hash 模式的方法如下:

  1. 安装 vue-router:首先,需要安装 vue-router。在项目中引入 vue-router,可以通过 npm 或 yarn 安装:

    npm install vue-router --save
    

    yarn add vue-router
    
  2. 配置路由:在项目中创建一个名为 router.js 的文件,用于配置路由。首先,引入 vue 和 vue-router:

    import Vue from 'vue'
    import Router from 'vue-router'Vue.use(Router)
    

    然后,定义路由规则,并创建一个 Router 实例:

    export default new Router({mode: 'hash',routes: [{path: '/about',name: 'about',component: () => import('@/components/About.vue')},{path: '/',name: 'home',component: () => import('@/components/Home.vue')}]
    })
    

    这里,mode 设置为 ‘hash’,表示使用 hash 模式。

  3. 在 main.js 中引入 router:在 main.js 文件中,引入刚刚创建的 router.js 文件:

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'new Vue({router,render: h => h(App)
    }).$mount('#app')
    
  4. 使用 router-view 组件:在需要跳转页面的地方,使用 router-view 组件。当点击 router-link 时,页面会根据配置的 hash 值进行跳转:

    <router-view></router-view>
    

总结来说,hash 模式是一种页面跳转的方式,不会改变浏览器的 URL,但页面会重新加载。在 Vue 项目中,hash 模式通常用于前端路由,通过 vue-router 实现。

2. 🔧 history模式

在 Web 开发中,history 模式是一种页面跳转的方式,它会在浏览器的 URL 栏中显示跳转后的页面地址,并且页面不会重新加载。history 模式的 URL 看起来和普通的 HTTP URL 一样,例如:http://example.com/about。

在 Vue 项目中,history 模式通常用于前端路由。Vue 前端路由支持 history 模式,使得页面跳转看起来更像传统的网站导航。

Vue 项目使用 history 模式的方法如下:

  1. 安装 vue-router:首先,需要安装 vue-router。在项目中引入 vue-router,可以通过 npm 或 yarn 安装:

    npm install vue-router --save
    

    yarn add vue-router
    
  2. 配置路由:在项目中创建一个名为 router.js 的文件,用于配置路由。首先,引入 vue 和 vue-router:

    import Vue from 'vue'
    import Router from 'vue-router'Vue.use(Router)
    

    然后,定义路由规则,并创建一个 Router 实例:

    export default new Router({mode: 'history',routes: [{path: '/about',name: 'about',component: () => import('@/components/About.vue')},{path: '/',name: 'home',component: () => import('@/components/Home.vue')}]
    })
    

    这里,mode 设置为 ‘history’,表示使用 history 模式。

  3. 在 main.js 中引入 router:在 main.js 文件中,引入刚刚创建的 router.js 文件:

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'new Vue({router,render: h => h(App)
    }).$mount('#app')
    
  4. 使用 router-view 组件:在需要跳转页面的地方,使用 router-view 组件。当点击 router-link 时,页面会根据配置的 history 值进行跳转:

    <router-view></router-view>
    

总结来说,history 模式是一种页面跳转的方式,会在浏览器的 URL 栏中显示跳转后的页面地址,并且页面不会重新加载。在 Vue 项目中,history 模式通常用于前端路由,通过 vue-router 实现。

3. 🔧 两种模式的对比

  • URL表现:hash模式下URL包含#号,而history模式下URL更为简洁。
  • 性能:history模式在部分浏览器中可能会有性能问题,如重复的history.pushState调用。
  • 兼容性:hash模式兼容性更好,但history模式在现代浏览器中得到了广泛支持。

🌟 总结

在本篇文章中,我们详细解析了Vue路由的两种模式:hash模式与history模式。通过对比分析,我们应该对这两种模式有了更深入的了解。在实际开发中,根据项目需求和场景选择合适的模式,将使我们的Vue应用更加高效和优质。🚀

参考资料:

  1. Vue.js官方文档:路由
  2. Vue Router官方文档

🌟 感谢您的阅读!如果您有任何疑问或建议,欢迎在评论区留言。💬

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_997022.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

25考研资料PDF汇总

资料V馊public号ZL研知己 V馊public号ZL研知己 25考研资料PDF汇总

ChatGPT/GPT4科研技术应用与AI绘图(包含Claude3、Gemini、Sora、GPTs中大模型的最新技术)

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

第八届世界3D渲染大赛作品在哪看?

精彩纷呈的第八届世界3D渲染大赛作品终于与我们见面了&#xff01;近来&#xff0c;这场赛事吸引了无数3D创意达人的瞩目。作为全球认可度极高、参与者众多的顶级3D动画大赛&#xff0c;今年也不例外&#xff0c;汇集了众多著名的艺术创作者。如果你正在寻找第八届赛事作品的观…

计算阶梯数 Python

题目描述 爱因斯坦曾出过这样一道有趣的数学题&#xff1a; 有一个长阶梯&#xff0c; 若每步上2阶&#xff0c;最后剩1阶&#xff1b; 若每步上3阶&#xff0c;最后剩2阶&#xff1b; 若每步上5阶&#xff0c;最后剩4阶&#xff1b; 若每步上6阶&#xff0c;最后剩5阶&#xf…

Springboot+vue的商业辅助决策系统的设计与实现(有报告)。Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的商业辅助决策系统的设计与实现&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的商业辅助决策系统的设计与实现&#xff0c;采…

Linux - 进程间通信

1、进程间通信介绍 1.1、进程间通信目的 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程&#xff1b;资源共享&#xff1a;多个进程之间共享同样的资源&#xff1b;通知事件&#xff1a;一个进程需要向另一个或一组进程发送消息&#xff0c;通知它&#xff08;…

2.5K Star,打造个性化博客平台

2.5K Star&#xff0c;打造个性化博客平台 Hi&#xff0c;骚年&#xff0c;我是大 G&#xff0c;公众号「GitHub 指北」会推荐 GitHub 上有趣有用的项目&#xff0c;一分钟 get 一个优秀的开源项目&#xff0c;挖掘开源的价值&#xff0c;欢迎关注。 导语 在当今的信息时代&a…

Python Tkinter GUI 基本概念

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd;如果停止&#xff0c;就是低谷&#xf…

AI 应用之路:质疑汤姆猫,成为汤姆猫,超越汤姆猫

过去一年&#xff0c;我对 AI 应用的看法经历了这样一个过程&#xff1a;质疑汤姆猫&#xff0c;理解汤姆猫&#xff0c;成为汤姆猫&#xff0c;超越汤姆猫。 什么是汤姆猫&#xff1f;汤姆猫是 2010 年移动互联网早期的一款应用&#xff0c;迅速走红&#xff0c;又淡出视野。…

【QT】窗口的大小标题图标设置

窗口的大小标题图标设置 添加一个新的类 创建完成&#xff0c;根据上一节最后的在总结&#xff0c;做个测试&#xff1a; #include "mybutton.h" #include <QDebug>//打印&#xff0c;标准输出 MyButton::MyButton(QWidget *parent) : QPushButton(parent) { …

Python爬虫实战(基础篇)—13获取《人民网》【最新】【国内】【国际】写入Word(附完整代码)

文章目录 专栏导读背景测试代码分析请求网址请求参数代码测试数据分析利用lxml+xpath进一步分析将获取链接再获取文章内容测试代码写入word完整代码总结专栏导读 🔥🔥本文已收录于《Python基础篇爬虫》 🉑🉑本专栏专门针对于有爬虫基础准备的一套基础教学,轻松掌握Py…

1分钟带你搞定Python函数分类

python语言中&#xff0c;函数可以分为内置函数、自定义函数、有参数函数、无参数函数、有名字函数和匿名函数。其中&#xff0c;内置函数可以直接使用&#xff0c;自定义函数需要根据需求定义。有参数函数在定义时需要指定参数&#xff0c;调用时传入参数。无参数函数在定义时…

opengl 学习(一)-----创建窗口

创建窗口 分类opengl 学习(一)-----创建窗口效果解析教程补充 分类 c opengl opengl 学习(一)-----创建窗口 demo: #include "glad/glad.h" #include "glfw3.h" #include <iostream> #include <cmath> #include <vector>using names…

MySQL实战45讲——30答疑文章(二):用动态的观点看加锁

目录 不等号条件里的等值查询 等值查询的过程 怎么看死锁&#xff1f; 怎么看锁等待&#xff1f; update 的例子 小结 上期问题时间 提示 文章摘自林晓斌老师《MySQL实战45讲》&#xff0c;作为笔记而用&#xff0c;故有加一些自己的理解。在第[20]和[21]篇文章中&…

链路聚合+VRRP

链路聚合---作用&#xff1a; 将多条链路聚合为一条逻辑链路&#xff0c;起到叠加带宽的作用 1.通道对端必须是一个设备 2.聚合的链路带宽必须一致 3.聚合的链路配置必须一致---华为设备为了保证聚合的链路配置一致&#xff0c;限制如果聚合的链路存在配 置&#xff0c;则不…

使用 Docker 部署 MrDoc 在线文档管理系统

1&#xff09;MrDoc 介绍 MrDoc 简介 MrDoc 觅思文档&#xff1a;https://mrdoc.pro/ MrDoc 使用手册&#xff1a;https://doc.mrdoc.pro/p/user-guide/ MrDoc 可以创建各类私有化部署的文档应用。你可以使用它进行知识管理、构建团队文库、制作产品手册以及在线教程等。 Mr…

存储架构 NAS 与 SAN:有什么区别?

SAN&#xff08;Storage Area Network&#xff09;和NAS&#xff08;Network Attached Storage&#xff09;是两种存储架构&#xff0c;它们在数据存储和管理方面有着不同的设计理念和应用场景。SAN通常将存储设备连接到一个独立的高速网络&#xff0c;而NAS则通过普通的网络协…

Java:JVM基础

文章目录 参考JVM内存区域程序计数器虚拟机栈本地方法栈堆方法区符号引用与直接引用运行时常量池字符串常量池直接内存 Hotspot虚拟机对象创建过程虚拟机对象的内存布局对象访问 class文件结构 类加载过程加载验证准备解析初始化使用卸载 参考 JavaGuide JVM内存区域 程序计数…

小白在VMware Workstation Pro上安装部署SinoDB V16.8

一、安装环境说明 CPU&#xff1a;2核或以上&#xff0c;内存&#xff1a;2G或以上&#xff1b;磁盘10G或以上&#xff1b;网卡&#xff1a;千兆 1.1检查服务器内存大小 命令&#xff1a;free -m 1.2检查服务器磁盘空间大小 命令&#xff1a;df -h 1.3检查服务器网络配置信息 命…

antvX6 - Vue自定义节点,并实现多种画布操作,拖拽、缩放、连线、双击、检索等等

一、 首先 antv x6 分为两个版本 低版本和高版本 我这里是使用的2.0版本 并且搭配了相关插件 例如&#xff1a;画布的图形变换、地图等 个人推荐 2.0版本&#xff0c;高版本配置多&#xff0c;可使用相关插件多&#xff0c;但是文档描述小&#xff0c;仍在更新&#xff0c; 低…