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

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过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.mzph.cn/news/728364.shtml

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

相关文章

基于SpringBoot的在线拍卖系统设计与实现(源码)

项目源码&#xff1a;https://gitee.com/oklongmm/biye2 引言 随着互联网技术的发展&#xff0c;电子商务得以快速发展&#xff0c;其中之一的在线拍卖系统也逐渐得到了广泛的应用。但是&#xff0c;现有的在线拍卖系统在操作复杂性、安全性和稳定性方面存在一定的问题。为了…

计算机网络面经-HTTPS加密过程

前言 在上篇文章HTTPS详解一中&#xff0c;我已经为大家介绍了 HTTPS 的详细原理和通信流程&#xff0c;但总感觉少了点什么&#xff0c;应该是少了对安全层的针对性介绍&#xff0c;那么这篇文章就算是对HTTPS 详解一的补充吧。还记得这张图吧。 HTTPS 和 HTTP的区别 显然&am…

idea Gradle 控制台中文乱码

如下图所示&#xff0c;idea 中的 Gradle 控制台中文乱码&#xff1a; 解决方法&#xff0c;如下图所示&#xff1a; 注意&#xff1a;如果你的 idea 使用 crack 等方式破解了&#xff0c;那么你可能需要在文件 crack-2023\jetbra\vmoptions\idea.vmoptions 中进行配置&#xf…

AcWing 106. 动态中位数

#include<bits/stdc.h>using namespace std;int main() {ios::sync_with_stdio(false);cin.tie(nullptr);int t;cin>>t;while(t--){//num 表示编号&#xff0c;n 表示数字的数目&#xff0c;题目保证//n 是奇数int num,n;cin>>num>>n;//输出编号&#…

Java引用传递及基本应用

在 Java 中&#xff0c;传递参数的方式主要有两种&#xff1a;值传递&#xff08;传递的是对象的引用值&#xff09;和引用传递。本教程将重点介绍 Java 中的引用传递以及其基本应用。 1. 引用传递概念 在 Java 中&#xff0c;所有的方法参数都是通过值传递的。对于对象类型的…

从零学算法41

41.给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,0] 输出&#xff1a;3 示例 2&#xff1a; 输入&#xff1a;nums […

【LeetCode-中等】18.四数之和 - 哈希/双指针

力扣题目链接 题目要求在 nums 数组里找到四个下标不同&#xff08;值可以相同&#xff09;的数&#xff0c;使得nums[a] nums[b] nums[c] nums[d] target&#xff0c;同时&#xff0c;还要求四元组不能重复&#xff08;{0, 1, 2, -2} 和 {-2, 0, 1, 2} 为同一个四元组&am…

MAC 的vscode菜单栏怎么调?

我去&#xff0c;这个bug找到了半天&#xff0c;终于找到正解了&#xff0c;仅记录&#xff0c;为广大和我一样不熟悉mac的兄弟们避坑。 正解&#xff1a;mac的vscode的菜单栏在屏幕最顶上&#xff0c;不用调出来&#xff0c;人家一直都有。

Redis集群(哨兵集群)

一.Sentinel作用和原理: 1.作用 监控:Sentinel会不断监控master和slave是否按预期工作. 自动故障恢复:如果master故障,Sentinel会将一个slave提升为master。当故障实例恢复后也会以新的master为主。 通知&#xff1a;Sentinel充当redis客户端的服务发现来源,当集群发生故障…

SAP MM学习笔记44 - 特殊调达流程 - Blanket购买发注(汇总采购)

上一章学习了 支付计划&#xff0c;本章继续学习 Blanket购买发注&#xff08;汇总采购&#xff09;。 SAP MM学习笔记43 - 特殊调达流程 - 支付计划-CSDN博客 1&#xff0c;Blanket购买发注 概要 其实就是订好一个大致数额&#xff0c;然后让随便买&#xff0c;只要不超这个…

数据挖掘:

一.数据仓库概述&#xff1a; 1.1数据仓库概述 1.1.1数据仓库定义 数据仓库是一个用于支持管理决策的、面向主题、集成、相对稳定且反映历史变化的数据集合。 1.1.2数据仓库四大特征 集成性&#xff08;Integration&#xff09;&#xff1a; 数据仓库集成了来自多个不同来源…

一篇文章教会你Python+selenium自动化生成测试报告

前言 批量执行完用例后&#xff0c;生成的测试报告是文本形式的&#xff0c;不够直观&#xff0c;为了更好的展示测试报告&#xff0c;最好是生成HTML格式的。 unittest里面是不能生成html格式报告的&#xff0c;需要导入一个第三方的模块&#xff1a;HTMLTestRunner 一、导…

Vue2+3

vue相关介绍 Vue的两种使用方式&#xff1a; 1、vue核心包开发 场景&#xff1a;局部模块改造 2、vue核心包&vue插件工程化开发 场景&#xff1a;整站开发 概念&#xff1a;vue是用于构建用户界面的渐进式框架 创建vue实例 创建Vue实例&#xff0c;初始化渲染步骤&am…

基于C/S架构的在线阅读器

项目简介 本项目实现了用户的基本阅读功能。项目内容涉及到IO&#xff0c;网络编程&#xff0c;C&#xff0c;QT等知识点。本次项目服务器搭建在ubuntu上&#xff0c;客户端ui在QT中实现&#xff0c;客户端和服务器使用套接字通信。 一、基本功能展示 &#xff08;1&#xff…

计算阶梯数 Python

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

20240304-使用VS2022编译blender3.6.2源代码

20240304-使用VS2022编译blender3.6.2源代码 一、软件环境 Win10 x64 22h2 JuneVS2022 v17.9.0CMake v3.24.4SVN v1.14.3GIT v2.29.2标签&#xff1a;win10 22h2 vs2022 blender 63335分栏&#xff1a;C 二、硬件环境 Win10 x64的PC台式机 三、获取源码 方法一 网盘下载…

【黑马程序员】C++项目之机房预约管理系统实战

文章目录 需求系统简介身份介绍机房介绍申请简介系统具体需求 实现菜单与退出功能实现功能测试 创建身份类创建角色基类创建学生类创建教师类创建管理员类 登录模块功能描述登录函数封装各个校色具体登录验证管理员操作界面调用流程 管理员模块构造函数实现管理员子菜单显示添加…

设置Matlab2022a断点查看参数变化

Matlab2022a设置断点&#xff0c;查看参数变化 本文使用的是下载好的matlab2022a软件&#xff0c;下载加安装matlab预计1小时&#xff08;百度网盘加速&#xff09;。需要的安装包的评论。 安装好的matlab界面如下&#xff1a; 接下来&#xff0c;编辑一个.m文件&#xff0c;…

C/C++编程-理论学习-通信协议理论

通信协议理论 protobuf简述 protobuf 简述 作用&#xff1a; 1. 将结构化数据 序列化 进行信息通信、存储。意为&#xff0c;数据结构化管理&#xff1b;意为&#xff0c;对结构化的数据进行序列化&#xff0c;便于发送、存储。可类比XML、JSON。 弊端&#xff1a; 1. buffe…

Java 的Executors的默认创建线程池的方法原理及使用场景、优缺点

原理 Java中的线程池是通过Executor框架实现的&#xff0c;Executor框架位于java.util.concurrent包下。线程池的核心是ThreadPoolExecutor类&#xff0c;而Executors类提供的工厂方法都是对ThreadPoolExecutor的封装。 ThreadPoolExecutor有几个关键参数&#xff1a; corePo…