Vue 进阶系列丨实现简易VueRouter

2024-02-09 12:28

本文主要是介绍Vue 进阶系列丨实现简易VueRouter,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

d4532423ea69f72036396d26e77fbf7d.png

‍‍Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧!


2013年7月28日,尤雨溪第一次在 GItHub 上为 Vue.js 提交代码;2015年10月26日,Vue.js 1.0.0版本发布;2016年10月1日,Vue.js 2.0发布。

最早的 Vue.js 只做视图层,没有路由, 没有状态管理,也没有官方的构建工具,只有一个库,放到网页里就可以直接用了。

后来,Vue.js 慢慢开始加入了一些官方的辅助工具,比如路由(Router)、状态管理方案(Vuex)和构建工具(Vue-cli)等。此时,Vue.js 的定位是:The Progressive Framework。翻译成中文,就是渐进式框架。

Vue.js2.0 引入了很多特性,比如虚拟 DOM,支持 JSX 和 TypeScript,支持流式服务端渲染,提供了跨平台的能力等。Vue.js 在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。

Vue 已是一名前端工程师必备的技能,现在就让我们开始深入学习 Vue.js 内部的核心技术原理吧!


与传统后端路由的区别

传统路由通常指的是基于后端服务器的路由管理方式,通过在服务器端配置路由规则,来实现不同 URL 地址对应的页面渲染。相比而言,像vueRouter这样的前端路由,他是通过 Vue.js 的组件系统来管理不同页面的渲染和切换。就是说,页面并没有跳转,还是这一个页面,只不过显示的是不同的组件而已。


vueRouter的两种模式

vueRouter有两种模式,一种是hash模式,一种是history模式。二者的区别如下:

1. Hash 模式:

a. URL 中会以 # 符号分割,例如:http://example.com/#/page

b. 通过监听浏览器的 hashchange 事件来实现页面的路由切换。

c. 不会向服务器发送请求,所有路由的切换都在客户端进行。

d. 兼容性好,支持在所有浏览器上正常运行。

2. History 模式:

a. URL 不会带有 # 符号,例如:http://example.com/page

b. 依赖 HTML5 的 History API 来实现页面的路由切换。

c. 使用 history.pushState 或 history.replaceState 方法来改变 URL,但这不会向服务器发送请求。

d. 在支持 HTML5 History API 的现代浏览器中可以实现,不支持该 API 的浏览器会自动回退到 hash 模式。

e. 需要后端服务器的支持,即服务器需要配置将所有的路由指向同一个 HTML 文件,以便在刷新页面时正确地加载应用程序的页面。

    f. 主要的区别在于 URL 的表现形式以及对浏览器历史记录的处理方式。一般来说,如果不需要考虑兼容性,使用 History 模式会更加友好,因为它提供了更加清晰、美观的 URL 结构,而且不会在 URL 中带有 # 符号。但是需要注意的是,在使用 History 模式时,需要确保服务器端对于任何路径都返回同一个 HTML 文件,以避免在刷新页面时出现 404 错误。

这里给出如果你使用的是 history 模式,那么你的 nginx 配置需要改下:

location / {    root /nginx/html;# 在路径匹配不上的情况下,将其指向index.html文件# 具体的路由匹配由vue-router接管。try_files $uri $uri/ /index.html; }

实现简易版hash模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>VueRouter-Hash模式</title>
</head>
<body><div><!-- 相当于 router-link --><a href="#/">首页</a><a href="#/mine">我的</a><a href="#/shop">商场</a></div><!-- 相当于 router-view --><div id="app"></div><script>var router = {// 定义路由表routes:{},// 定义路由规则route(path, callback){this.routes[path] = callback},init(){window.onhashchange = ()=>{var hash = location.hash.replace('#', '')// 根据hash,获取 this.routes 中的对应内容this.routes[hash] && this.routes[hash]()}}}router.init()// 模拟用户使用var view = document.getElementById('app')router.route('/', ()=>{view.innerHTML = '首页'})router.route('/mine', ()=>{view.innerHTML = '我的'})router.route('/shop', ()=>{view.innerHTML = '商场'})
</script>
</body>
</html>

e0e87cb81dfe2172e11586eb99af9d45.gif


实现简易版history模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>VueRouter-History模式</title>
</head>
<body>
<div><!-- 相当于 router-link --><a href="/">首页</a><a href="/mine">我的</a><a href="/shop">商场</a>
</div>
<!-- 相当于 router-view -->
<div id="app"></div><script>// 实现history风格的路由功能var router = {routes:{},route(path, callback){this.routes[path] = callback},// 路由切换go(path){// url更改history.pushState({path}, null, path)// 触发回调this.routes[path] && this.routes[path]()},init(){// 监听浏览器的前进后退window.addEventListener('popstate',(e)=>{var path = e.state ? e.state.path : '/'this.routes[path] && this.routes[path]()})}}router.init()var links = document.querySelectorAll('a')links.forEach(item=>{item.addEventListener('click', function(e){router.go(this.getAttribute('href'))e.preventDefault()})})// 模拟用户使用var view = document.getElementById('app')router.route('/', ()=>{view.innerHTML = '首页'})router.route('/mine', ()=>{view.innerHTML = '我的'})router.route('/shop', ()=>{view.innerHTML = '商场'})
</script>
</body>
</html>

51083f28011261266c30a1d34b68c019.gif


Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧!

28bcae7bd3f6c04daacbf071a33c175e.png

叶阳辉

HFun 前端攻城狮

往期精彩:

这篇关于Vue 进阶系列丨实现简易VueRouter的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/694224

相关文章

Python中pywin32 常用窗口操作的实现

《Python中pywin32常用窗口操作的实现》本文主要介绍了Python中pywin32常用窗口操作的实现,pywin32主要的作用是供Python开发者快速调用WindowsAPI的一个... 目录获取窗口句柄获取最前端窗口句柄获取指定坐标处的窗口根据窗口的完整标题匹配获取句柄根据窗口的类别匹配获取句

在 Spring Boot 中实现异常处理最佳实践

《在SpringBoot中实现异常处理最佳实践》本文介绍如何在SpringBoot中实现异常处理,涵盖核心概念、实现方法、与先前查询的集成、性能分析、常见问题和最佳实践,感兴趣的朋友一起看看吧... 目录一、Spring Boot 异常处理的背景与核心概念1.1 为什么需要异常处理?1.2 Spring B

Python位移操作和位运算的实现示例

《Python位移操作和位运算的实现示例》本文主要介绍了Python位移操作和位运算的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 位移操作1.1 左移操作 (<<)1.2 右移操作 (>>)注意事项:2. 位运算2.1

如何在 Spring Boot 中实现 FreeMarker 模板

《如何在SpringBoot中实现FreeMarker模板》FreeMarker是一种功能强大、轻量级的模板引擎,用于在Java应用中生成动态文本输出(如HTML、XML、邮件内容等),本文... 目录什么是 FreeMarker 模板?在 Spring Boot 中实现 FreeMarker 模板1. 环

Qt实现网络数据解析的方法总结

《Qt实现网络数据解析的方法总结》在Qt中解析网络数据通常涉及接收原始字节流,并将其转换为有意义的应用层数据,这篇文章为大家介绍了详细步骤和示例,感兴趣的小伙伴可以了解下... 目录1. 网络数据接收2. 缓冲区管理(处理粘包/拆包)3. 常见数据格式解析3.1 jsON解析3.2 XML解析3.3 自定义

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controll

Spring Security自定义身份认证的实现方法

《SpringSecurity自定义身份认证的实现方法》:本文主要介绍SpringSecurity自定义身份认证的实现方法,下面对SpringSecurity的这三种自定义身份认证进行详细讲解,... 目录1.内存身份认证(1)创建配置类(2)验证内存身份认证2.JDBC身份认证(1)数据准备 (2)配置依

利用python实现对excel文件进行加密

《利用python实现对excel文件进行加密》由于文件内容的私密性,需要对Excel文件进行加密,保护文件以免给第三方看到,本文将以Python语言为例,和大家讲讲如何对Excel文件进行加密,感兴... 目录前言方法一:使用pywin32库(仅限Windows)方法二:使用msoffcrypto-too

C#使用StackExchange.Redis实现分布式锁的两种方式介绍

《C#使用StackExchange.Redis实现分布式锁的两种方式介绍》分布式锁在集群的架构中发挥着重要的作用,:本文主要介绍C#使用StackExchange.Redis实现分布式锁的... 目录自定义分布式锁获取锁释放锁自动续期StackExchange.Redis分布式锁获取锁释放锁自动续期分布式

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删