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

最新推荐文章于 2024-10-25 20:02:59 发布
最新推荐文章于 2024-10-25 20:02:59 发布
阅读量9.9k 收藏 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错误。
摘要由CSDN通过智能技术生成

目录

一、hash模式

二、history模式

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

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

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

一、hash模式

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

最低0.47元/天 解锁文章
ChocolateBar~
关注
专栏目录
JavaScript的路由
ITjun666的博客
11-07 1970
JavaScript的hash路由和history的实现方式!
js原生实现路由
weixin_42755813的博客
07-17 495
Nodejs原生实现路由 实现单页面跳转 类似tab选项卡但不是tab选项卡 通过改变res.url地址实现跳转 const http=require('http');//获取http模块 const fs =require('fs')//获取fs文件系统模块 const host='localhost'; const port=3000 //后端路由就是是一个web服务器 //路由 ...
学习记录----简单的原生js路由
lisiyi523897080的专栏
12-19 280
学习记录----简单的原生js路由 在以前的web程序中，路由字眼只出现在后台中。但是随着SPA单页面程序的发展，便出现了前端路由一说。单页面顾名思义就是一个网站只有一个html页面，但是点击不同的导航显示不同的内容，对应的url也会发生变化，这就是前端路由做的事。也就是通过JS实时检测url的变化，从而改变显示的内容。 目前很多前端框架都有接口去...
Vue.js 路由详解与代码实例
最新发布
By4tuna的博客
10-25 1185
Vue.js 路由是 Vue.js 官方提供的一个插件，用于管理应用中的路由。通过 Vue Router，开发者可以定义应用的路由规则，并将不同的 URL 映射到不同的组件。这样，用户在访问不同的 URL 时，可以动态加载相应的组件，实现单页应用的流畅体验。Vue.js 路由是构建单页应用的核心组件之一。通过 Vue Router，开发者可以轻松地管理应用的路由，实现动态加载组件、嵌套路由、重定向与别名等功能。
原生js路由的实现
u014265398的博客
11-06 1015
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一.学习javascript路由的实现二.实习效果总结 前言 学习原生javascript路由的实现 <f 一.学习javascript路由的实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基于javascript路由的实现</title> </head
使用原生JS封装Vue-Router
weixin_46726346的博客
08-11 744
摘要 前段时间对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 1039
效果图： 项目地址：https://github.com/biaochenxuying/route 效果体验地址： 1. 滑动效果： https://biaochenxuying.github.io/route/index.html 2. 淡入淡出效果： https://biaochenxuying.github.io/route/in...
js原生实现路由切换
MFWSCQ的博客
07-01 3427
什么是前端路由？ 路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。 在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。 如何实现前端路由？ 要实现前端路由，需要解决两个核心： 如何改变 URL 却不引...
VueJS基础系列：使用vue-router
foreverzwl
04-18 443
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 258
<!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 1517
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 188
路由模式 路由模式有两种 hash：路径带 # 符号，如 http://localhost/#/login（默认） history：路径不带 # 符号，如http://localhost/login 修改路由配置 index.js export default new Router({ mode:'history' })
抽丝剥茧看路由---2__原生JS仿写路由
hezz and gonng
06-20 502
…续前缘 上一篇文章只是作为本文的对比, 本文重点是原生JS仿写路由 既然是仿写, 那么结构自然要基本一样咯index.html <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, max
原生JS路由实现页面跳转
JBIB ENGINE
02-07 727
一般情况下菜单栏的加载模式中，都是通过中的href='/xxxx’来跳转到指定的页面，所以路由的第一步就是监听到此菜单栏中的点击事件，并在点击时通过event.preventDefault()阻止浏览器的默认行为。通过hashchange函数来监听加了锚之后的url（即hash）,监听到hash的变化后，我们可以拿到点击时的url，通过调用Router(params)时传入的params参数来找到此文件的静态路径，然后传入到iframe。原生JS路由学习地址。
原生js实现简单路由
qq_28020627的博客
01-20 1265
这是一个测试文件 user-scalable=no"> function Router(){ this.router = [];//路由数组 } Router.prototype.route = function(routePath, fun) { //第一个参数是路由路径，第二个参数是回调函数 this.router.push({ path: routeP
js设计模式:路由模式
m0_54741495的博客
02-21 729
js设计模式:路由模式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值