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

最新推荐文章于 2024-05-03 11:08:18 发布
VIP文章 最新推荐文章于 2024-05-03 11:08:18 发布
阅读量9.7k 收藏 2
点赞数 2
分类专栏： vue 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53061847/article/details/125018494
版权

目录

一、hash模式

二、history模式

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

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

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

一、hash模式

hash值变化浏览器不会重新发起请求，但是会触发window.hashChange事件，假如我们在hashChange事件中获取当前的hash

最低0.47元/天 解锁文章
ChocolateBar~
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
01-19
vue-router(路由跳转) vuex(状态管理) axios(数据请求) mock.js(模拟后台数据) vue-touch(手势判断) fastclick(解决移动端浏览器 300 毫秒点击延迟问题) vue-lazyload(图片懒加载) swiper(轮播) 设计布局: ...
vuejs中路由器的两种模式-哈希模式与历史模式
itclanCoder
08-05 2627
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言路由器分别有两种模式,一种是hash模式,另一种是history模式,在使用vue-cli以及vue-router默认搭建的vue项目,如果不做特殊的配置...
js原生实现路由
weixin_42755813的博客
07-17 438
Nodejs原生实现路由 实现单页面跳转 类似tab选项卡但不是tab选项卡 通过改变res.url地址实现跳转 const http=require('http');//获取http模块 const fs =require('fs')//获取fs文件系统模块 const host='localhost'; const port=3000 //后端路由就是是一个web服务器 //路由 ...
js原生实现路由切换
MFWSCQ的博客
07-01 3142
什么是前端路由？ 路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。 在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。 如何实现前端路由？ 要实现前端路由，需要解决两个核心： 如何改变 URL 却不引...
原生js路由的实现
u014265398的博客
11-06 973
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一.学习javascript路由的实现二.实习效果总结 前言 学习原生javascript路由的实现 <f 一.学习javascript路由的实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基于javascript路由的实现</title> </head
原生 js 实现一个前端路由 router
weixin_33768481的博客
01-29 980
效果图： 项目地址：https://github.com/biaochenxuying/route 效果体验地址： 1. 滑动效果： https://biaochenxuying.github.io/route/index.html 2. 淡入淡出效果： https://biaochenxuying.github.io/route/in...
【前端路由原理--原生JS实现方式】--前后端路由的区别、关于单页面应用与多页面应用、什么是CSR、SSR、SSG、ISP
学习分享
10-24 1526
简述 前后端路由的区别来源、以及关于SPA、MPA 之前存在的区别、什么是SSR、CSR、SSG、ISP；原生JS如何实现 SPA 的Hash、History API 方式，它们的原理是什么？
使用原生JS封装Vue-Router
weixin_46726346的博客
08-11 686
摘要 前段时间对Vue-router里面的一些方法原理进行了实现，在这里进行整理一下，相比于上一篇实现的axios，这次实现的路由显得更复杂一些。 实现的方法主要有push，go，replace以及beforeEach和afterEach的钩子函数。 实现的原理主要有URL和页面的响应，以及router-view和router-link。 1.hash和history 在写之前我们要了解hash和history的区别，主要的区别还是在于 hash模式更改路由不需要重新请求，并且URL中路由前面有#。 his
使用vue-router切换页面时实现设置过渡动画
12-13
背景 今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现...import VueRouter from 'vue-router' import Home from '../co
使用 vue-router 切换页面时怎么设置过渡动画
01-20
如何实现切换页面时的过渡动画? 背景 今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂...import VueRouter from 'vue-router' import H
js实现轻量级前端路由框架
08-28
其用少量的代码，实现了web项目的单页面实现框架，通过此框架可以实现前端路由功能。此框架适合做单页面程序。简单、实用、可拓展
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环境进行过测试感谢某...
JavaScript的路由
ITjun666的博客
11-07 1763
JavaScript的hash路由和history的实现方式!
JS项目配置路由
qq_45728643的博客
04-14 849
index.js 文件： src/router/index.js， 创建路由模块，用于导入，将一下代码段写入index.js。8.1在src/components创建tabbar目录，在tabbar目录下创建TabBar.vue文件，文件： src/router/routes.js,真正的路由配置，放在这个文件中，该文件需要。src/router/routes.js ， 在 routes.js 文件中配置路由，在src目录下创建router目录（将所有与路由相关的文件都会放在这个目录下）
VueJS基础系列：使用vue-router
foreverzwl
04-18 393
vue-router的作用： vuejs官方路由管理器，可以用来实现单页应用里，配合tab选项卡切换显示不同页面内容。 官方中文手册： https://router.vuejs.org/zh/ vue-router在项目中的使用： 1、如果项目中没有vue-router，需要自己添加上去，在项目中的package.json文件中添加依赖： 2、命令行下载安装 cnpm inst...
【JavaScript】前端路由原理之 hash 模式和 history 模式
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
09-10 85
什么是路由？ 个人理解路由就是浏览器 URL 和页面内容的一种映射关系。 比如你看到我这篇博客，博客的链接是一个 URL，而 URL 对应的就是我这篇博客的网页内容，这二者之间的映射关系就是路由。 其中路由又分为前端路由和后端路由，由于目前是大部门开发模式都是前后端分离开发模式，其大部分应用都是 SPA(simple Page Application，单页面应用)，个人的工作也是由后端提供API...
ReactJS 的5种路由模式
alanbiz1314的博客
07-15 1186
我们一直在使用的路由方式是BrowserRouter，也就是浏览器的路由方式，其实React还有几种路由方式： 1、BrowserRouter：浏览器的路由方式，也就是在开发中最常使用的路由方式 2、HashRouter：在路径前加入#号成为一个哈希值，Hash模式的好处是，再也不会因为我们刷新而找不到我们的对应路径 3、MemoryRouter：不存储history，所有路由过程...
vue-router 路由模式
sally18的博客
09-09 1439
vue-router 路由模式有哪几种？ 有三种。 1. Hash 模式： 使用URL 的 hash 值来作为路由，支持所有浏览器 2. History 模式：以来HTML5 History API 和服务器配置，参考官网中HTML5 History 模式tract 3. Abstract 模式：支持所有 javascript 运行模式，如果发现没有浏览器的API，路由会自动强制进入这个模式。 vue-router 中默认使用的是 hash模式， 也是会出现如下的URL；URL带有#号 我们..
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 289
注释很详细，直接上代码……
Vue-router跳转和location.href有什么区别？
06-08
Vue-router是Vue.js的官方路由插件，它基于Vue.js的生命周期和组件系统，实现了客户端路由的跳转。而location.href则是原生JavaScript的跳转方式。 它们的主要区别在于： 1. Vue-router实现了SPA（Single Page Application）的路由跳转，而location.href刷新页面会重新加载所有资源，不适合SPA。 2. Vue-router可以实现无刷新跳转，而location.href是整页刷新。 3. Vue-router可以通过路由参数进行传参，而location.href需要手动拼接url参数。 4. Vue-router可以通过路由守卫进行权限控制，而location.href无法做到。 因此，在Vue.js开发中，推荐使用Vue-router进行路由的跳转。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值