【vue-router】---原生js实现两种路由模式

最新推荐文章于 2025-03-17 22:35:02 发布
最新推荐文章于 2025-03-17 22:35:02 发布
阅读量1w 收藏 2
点赞数 2
分类专栏： vue 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53061847/article/details/125018494
版权
本文详细介绍了使用原生JavaScript实现Vue的两种前端路由模式——Hash模式和History模式，包括它们的原理、实现方式以及区别。Hash模式利用window.hashChange事件更新页面内容，History模式则依赖window.history对象的API。History模式更加优雅，但需要后端配合防止刷新导致的404错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一、hash模式

二、history模式

三、hash模式和history模式的区别

我们在vue中用的路由其实也是用原生的js封装的，本文总结两种路由模式的原生写法，总结两者的实现的原理和区别

Vue两种前端路由（hash模式和history模式）实现原理解析及区别

一、hash模式

hash值变化浏览器不会重新发起请求，但是会触发window.hashChange事件，假如我们在hashChange事件中获取当前的hash值，并根据hash值来修改页面内容，则达到了前端路由的目的。js：在window.onhashchange中获取

最低0.47元/天 解锁文章
js设计模式:路由模式
m0_54741495的博客
02-21 779
js设计模式:路由模式
js原生实现路由
weixin_42755813的博客
07-17 518
Nodejs原生实现路由 实现单页面跳转 类似tab选项卡但不是tab选项卡 通过改变res.url地址实现跳转 const http=require('http');//获取http模块 const fs =require('fs')//获取fs文件系统模块 const host='localhost'; const port=3000 //后端路由就是是一个web服务器 //路由 ...
抽丝剥茧看路由---2__原生JS仿写路由
hezz and gonng
06-20 525
…续前缘 上一篇文章只是作为本文的对比, 本文重点是原生JS仿写路由 既然是仿写, 那么结构自然要基本一样咯index.html <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, max
【Javascript】路由是 Express.js 中的一段代码，它将 HTTP 方法（如 GET、POST、PUT、DELETE 等）和 URL 路径与一个处理函数关联起来。
最新发布
weixin_44174312的博客
03-17 1423
是 Express.js 应用程序的核心部分，定义了应用程序的 URL 端点和 HTTP 方法，并将请求映射到相应的处理逻辑。作为初学者，理解路由的作用及其与其他组件（如控制器、模型）的联系是掌握 Web 应用程序开发的关键。以下是对路由的详细解释，以及它如何与其他组件协作的分析。
学习记录----简单的原生js路由
lisiyi523897080的专栏
12-19 306
学习记录----简单的原生js路由 在以前的web程序中，路由字眼只出现在后台中。但是随着SPA单页面程序的发展，便出现了前端路由一说。单页面顾名思义就是一个网站只有一个html页面，但是点击不同的导航显示不同的内容，对应的url也会发生变化，这就是前端路由做的事。也就是通过JS实时检测url的变化，从而改变显示的内容。 目前很多前端框架都有接口去...
原生js路由的实现
u014265398的博客
11-06 1046
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一.学习javascript路由的实现二.实习效果总结 前言 学习原生javascript路由的实现 <f 一.学习javascript路由的实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基于javascript路由的实现</title> </head
使用原生JS封装Vue-Router
weixin_46726346的博客
08-11 804
摘要 前段时间对Vue-router里面的一些方法原理进行了实现，在这里进行整理一下，相比于上一篇实现的axios，这次实现的路由显得更复杂一些。 实现的方法主要有push，go，replace以及beforeEach和afterEach的钩子函数。 实现的原理主要有URL和页面的响应，以及router-view和router-link。 1.hash和history 在写之前我们要了解hash和history的区别，主要的区别还是在于 hash模式更改路由不需要重新请求，并且URL中路由前面有#。 his
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
Vite 是由 Vue.js 作者尤雨溪开发的新型前端构建工具，它利用了 ES 模块的原生导入功能，实现了更快的热更新和开发体验。TypeScript（简称TS）则是一种强类型、静态类型的编程语言，它在 JavaScript 的基础上增加了...
uni-crazy-router:一个更贴合uni-app的router插件，一切都使用uni-app原生钩子实现和方法实现，抛弃了vue-router的影子
03-21
一个更贴合uni-app的router插件，一切都使用uni-app原生钩子实现和方法实现，抛弃了vue-router的影子 qq群：701697982 注意 由于条件限制，仅在H5环境和微信小程序环境，以及app端android和ios环境进行过测试感谢某...
原生 js 实现一个前端路由 router
weixin_33768481的博客
01-29 1072
效果图： 项目地址：https://github.com/biaochenxuying/route 效果体验地址： 1. 滑动效果： https://biaochenxuying.github.io/route/index.html 2. 淡入淡出效果： https://biaochenxuying.github.io/route/in...
原生JS路由实现页面跳转
JBIB ENGINE
02-07 972
一般情况下菜单栏的加载模式中，都是通过中的href='/xxxx’来跳转到指定的页面，所以路由的第一步就是监听到此菜单栏中的点击事件，并在点击时通过event.preventDefault()阻止浏览器的默认行为。通过hashchange函数来监听加了锚之后的url（即hash）,监听到hash的变化后，我们可以拿到点击时的url，通过调用Router(params)时传入的params参数来找到此文件的静态路径，然后传入到iframe。原生JS路由学习地址。
js原生实现路由切换
MFWSCQ的博客
07-01 3521
什么是前端路由？ 路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。 在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。 如何实现前端路由？ 要实现前端路由，需要解决两个核心： 如何改变 URL 却不引...
VueJS基础系列：使用vue-router
foreverzwl
04-18 458
vue-router的作用： vuejs官方路由管理器，可以用来实现单页应用里，配合tab选项卡切换显示不同页面内容。 官方中文手册： https://router.vuejs.org/zh/ vue-router在项目中的使用： 1、如果项目中没有vue-router，需要自己添加上去，在项目中的package.json文件中添加依赖： 2、命令行下载安装 cnpm inst...
原生js的location.hash实现Vue路由
u010234868的专栏
09-17 290
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href=".
vue-router 路由模式
sally18的博客
09-09 1580
vue-router 路由模式有哪几种？ 有三种。 1. Hash 模式： 使用URL 的 hash 值来作为路由，支持所有浏览器 2. History 模式：以来HTML5 History API 和服务器配置，参考官网中HTML5 History 模式tract 3. Abstract 模式：支持所有 javascript 运行模式，如果发现没有浏览器的API，路由会自动强制进入这个模式。 vue-router 中默认使用的是 hash模式， 也是会出现如下的URL；URL带有#号 我们..
18. Vue.js路由模式
UnityAlvin
09-05 211
路由模式 路由模式有两种 hash：路径带 # 符号，如 http://localhost/#/login（默认） history：路径不带 # 符号，如http://localhost/login 修改路由配置 index.js export default new Router({ mode:'history' })
原生js实现简单路由
qq_28020627的博客
01-20 1300
这是一个测试文件 user-scalable=no"> function Router(){ this.router = [];//路由数组 } Router.prototype.route = function(routePath, fun) { //第一个参数是路由路径，第二个参数是回调函数 this.router.push({ path: routeP
vue组件原生事件以及路由
daruan1111的博客
07-25 414
1.组件 组件就是可以扩展HTML元素，封装可重用的HTML代码，可以将组件看作自定义的HTML元素 1.1组件注册 全局注册： 组件注册时，需要给他一个名字，如下： Vue.component('my-component-name', { /* ... */ }) # 组件名使用kebab-case (短横线分隔命名)定义时，引用这个元素时使用<my-com...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值