vue2路由和vue3路由区别及原理

一、Vue2 与 Vue3 路由的区别

1. 创建路由实例方式的不同

  • Vue 2 中,通过 Vue.use() 注册路由插件,并通过 new VueRouter() 来创建路由实例。

     
import Vue from 'vue';import VueRouter from 'vue-router';import Home from '@/components/Home.vue';Vue.use(VueRouter);const routes = [  { path: '/', component: Home }];const router = new VueRouter({  routes});new Vue({  router,  render: h => h(App)}).$mount('#app');

Vue 3 中,通过 createRouter 和 createWebHistory 等 API 创建路由实例,直接使用 app.use() 挂载,不再需要 Vue.use() 来注册插件。

import { createApp } from 'vue';import { createRouter, createWebHistory } from 'vue-router';import Home from '@/components/Home.vue';import App from './App.vue';const routes = [  { path: '/', component: Home }];const router = createRouter({  history: createWebHistory(),  routes});const app = createApp(App);app.use(router);app.mount('#app');

2. 动态路由的添加方式

  • Vue 2 中使用 addRoutes() 来动态添加多个路由,这个方法已经在 Vue 3 中被移除。

router.addRoutes([  { path: '/about', component: About }]);

Vue 3 中使用 addRoute() 来动态添加单个路由,且可以指定父级路由进行嵌套路由的动态添加。

router.addRoute({ path: '/about', component: About });router.addRoute('parent', { path: 'child', component: Child });

3. 路由守卫的变化

Vue 3 在组合式 API (setup) 中新增了 onBeforeRouteUpdate 和 onBeforeRouteLeave 这两个钩子,可以直接在 setup 中使用,而不再依赖组件选项(Options API)。

  • Vue 2 中,路由守卫在组件选项中定义。

export default {  beforeRouteEnter(to, from, next) {    // 在进入组件前调用    next();  },  beforeRouteUpdate(to, from, next) {    // 路由更新时调用    next();  },  beforeRouteLeave(to, from, next) {    // 离开组件时调用    next();  }};

Vue 3 中,可以在 setup 中直接使用 onBeforeRouteUpdate 和 onBeforeRouteLeave

import { onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';export default {  setup() {    onBeforeRouteLeave((to, from) => {      // 路由离开时触发的守卫    });    onBeforeRouteUpdate((to, from) => {      // 路由更新时触发的守卫    });  }};

4. 组合式 API 的支持

Vue 3 使用了 useRouter 和 useRoute 这两个 Composition API,能够在 setup 中方便地访问路由实例和路由信息。这在 Vue 2 中是无法做到的,因为 Vue 2 的 vue-router 与 Options API 深度耦合。

import { useRouter, useRoute } from 'vue-router';export default {  setup() {    const router = useRouter();    const route = useRoute();    const goToHome = () => {      router.push({ name: 'Home' });    };    return { goToHome, route };  }};

5. 路由模式的选择

  • Vue 2 中,使用 mode 参数来决定使用 history 还是 hash 模式。

const router = new VueRouter({  mode: 'history',  // 或者 'hash'  routes});

Vue 3 中,使用 createWebHistory() 或 createWebHashHistory() 明确区分路由模式。

const router = createRouter({  history: createWebHistory(),  // 或者 createWebHashHistory()  routes});

6. 其他差异

  • 更好的 TypeScript 支持:Vue 3 和 vue-router@4 对 TypeScript 进行了优化,提供了完整的类型推断和类型检查。

  • 过渡效果改进:Vue 3 的 <router-view> 支持新的 v-slot 用法来控制过渡效果。

二、Vue Router 的原理解析

1. 路由的核心原理

Vue Router 的核心原理就是通过 Hash 模式 或 History 模式 来监听 URL 的变化,从而实现视图组件的动态切换。

  1. Hash 模式:通过监听 window.onhashchange 事件来感知 URL 中 # 后面内容的变化。

  2. History 模式:基于 window.history.pushState 和 window.history.replaceState API 来修改 URL,并通过 popstate 事件监听 URL 的变化。

2. 路由匹配机制

Vue Router 的路由匹配基于路由表 (routes) 进行匹配。它使用了 path-to-regexp 库将 path 转换成正则表达式,并与当前 URL 进行比对,从而找到合适的路由。

  • 每个路由规则(RouteRecord)都包含 pathcomponent 等信息。

  • 在匹配过程中,会将路由表中的每一个 RouteRecord 进行遍历,并基于路径解析进行比对。

  • 一旦找到匹配的路由规则,就会渲染对应的组件。

3. 导航守卫执行顺序

Vue Router 提供了三种导航守卫:全局守卫、路由独享守卫和组件内守卫。它们的执行顺序如下:

  1. 全局前置守卫 (beforeEach)

  2. 路由独享守卫 (beforeEnter)

  3. 组件内守卫 (beforeRouteEnter)

  4. 全局解析守卫 (beforeResolve)

  5. 全局后置守卫 (afterEach)

4. 路由切换过程

  • 路由解析:在 router.push 或者 URL 变化时,路由会首先匹配路由表中符合条件的路由规则。

  • 执行导航守卫:依次执行全局、路由独享和组件内的导航守卫。

  • 更新视图:在守卫全部通过后,更新组件树,重新渲染 router-view 视图。

三、总结

Vue 3 的 vue-router@4 相较于 Vue 2 更加现代化和灵活,并且对 TypeScript 进行了更好的支持。与此同时,Vue 3 的路由实现基于 Composition API,使其能够更好地与 Vue 3 的设计理念相契合,提升了开发体验和可维护性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/55571.shtml

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

相关文章

如何减少网络安全事件的损失

为了减轻网络安全事件的损失&#xff0c;可以采取以下多项措施&#xff1a; 一、数据备份与恢复 定期备份数据&#xff1a;包括文件、数据库和系统映像等&#xff0c;确保在发生安全事件时&#xff0c;能够快速恢复数据和系统&#xff0c;从而减少损失。制定恢复计划&#xf…

k8s的控制节点不能访问node节点容器的ip地址

master控制node服务器添加容器后,访问不了该node服务器容器的ip,只能在node服务器访问 排查后发现是k8s的master服务器和node节点的网址网段和k8s初始化时提示的ip网段不一致 我之前是192.168.137.50, 实际上master主机期望的是192.168.1.50 解决方案: 1.删除服务器后重建ma…

使用iTextPDF库时,设置文字为中文格式

在使用iTextPDF库时&#xff0c;设置文字为中文格式主要涉及选择合适的中文字体&#xff0c;并确保该字体能够正确渲染中文字符。由于iTextPDF的内置字体通常不支持中文&#xff0c;因此你需要加载一个支持中文的字体文件&#xff08;如TrueType字体&#xff0c;.ttf文件&#…

SpringCloud入门(十二)全局过滤器和跨域

一、全局过滤器 全局过滤器的作用也是处理一切进入网关的请求和微服务响应&#xff0c;与GatewayFilter的作用一样。 区别在于GatewayFilter通过配置定义&#xff0c;处理逻辑是固定的&#xff0c;如果我们希望拦截请求&#xff0c;做自己的业务逻辑则没办法实现。而GlobalFilt…

【api连接ChatGPT的最简单方式】

通过api连接ChatGPT的最简单方式 建立client 其中base_url为代理&#xff0c;若连接官网可省略&#xff1b;配置环境变量 from openai import OpenAI client OpenAI(base_url"https://api.chatanywhere.tech/v1" )或给出api和base_url client OpenAI(api_key&…

英文论文安全的免费查重网站

关注B站可以观看更多实战教学视频&#xff1a;hallo128的个人空间 英文论文安全的免费查重网站 对于英文论文查重&#xff0c;以下是一些相对安全、且免费使用的查重网站推荐。不过请注意&#xff0c;免费工具通常只能提供基础查重功能&#xff0c;对于学术论文的全面查重&…

【AI大模型-文心-思维树解读-仓颉精通之路-11】

提问&#xff1a;你还记得我们设置过一个暗号吗&#xff1f;仓颉精通之路 回答&#xff1a;如下 版本&#xff1a;文心大模型3.5 是的&#xff0c;我记得我们之前设置过的“暗号”是“仓颉精通之路”。这个“暗号”可以被视为一个象征性的口号或指引&#xff0c;代表着我们在追…

VLAN 和 ARP 表

VLAN 和 ARP 表之间有着密切的关系&#xff0c;因为 ARP (地址解析协议) 用于在同一个二层广播域内将 IP 地址解析为 MAC 地址。VLAN 将一个物理局域网分割成多个逻辑局域网&#xff0c;每个 VLAN 都是一个独立的广播域。因此&#xff0c;ARP 表的作用范围被限制在每个 VLAN 内…

Redis:string类型

Redis&#xff1a;string类型 string命令设置与读取SETGETMSETMGET 数字操作INCRINCRBYDECRDECRBYINCRBYFLOAT 字符串操作APPENDSTRLENGETRANGESETRANGE 内部编码intembstrraw 在Redis中&#xff0c;字符串string存储的是二进制&#xff0c;以byte为单位&#xff0c;输入的二进…

Pikachu-Unsafe FileUpload-客户端check

上传图片&#xff0c;点击查看页面的源码&#xff0c; 可以看到页面的文件名校验是放在前端的&#xff1b;而且也没有发起网络请求&#xff1b; 所以&#xff0c;可以通过直接修改前端代码&#xff0c;删除 checkFileExt(this.value) 这部分&#xff1b; 又或者先把文件名改成…

java代理模式(动态代理、静态代理、需要实现类的JDK代理、不需要实现类的JDK动态代理、CGLIB代理)

静态代理简单使用 静态代理是代理模式的一种实现方式&#xff0c;它在编译时就已经确定了被代理对象和代理对象的关系。在静态代理中&#xff0c;需要手动创建一个代理类&#xff0c;该代理类与被代理对象实现相同的接口或继承相同的父类&#xff0c;并在代理类的方法中调用被…

C++基类构造器的自动调用

C基类构造器的自动调用 虽然基类的构造器和解构器不会被派生类继承&#xff0c;但它们会被派生类的构造器和解构器自动调用&#xff0c;今天我们用代码实证一下。 验证代码 源代码&#xff0c;仔细看注释内容&#xff1a; D:\YcjWork\CppTour>vim c2004.cpp #include &l…

《RabbitMQ篇》基本概念介绍

MQ功能 解耦 MQ允许不同系统或组件之间松散耦合。发送者和接收者不需要直接连接&#xff0c;从而提高了系统的灵活性和可维护性。异步处理 使用MQ可以实现异步消息传递&#xff0c;发送者可以将消息放入队列后立即返回&#xff0c;不必等待接收者处理。这提高了系统的响应速度…

RabbitMQ入门3—virtual host参数详解

在 RabbitMQ 中&#xff0c;创建 Virtual Host 时会涉及到一些参数配置&#xff0c;比如 tags 和 Default Queue Type。下面是对这两个参数的详细解释&#xff1a; 1. Tags Tags 是 Virtual Host 的标记&#xff0c;用来为 Virtual Host 添加元数据&#xff0c;帮助你管理和组…

牛客周赛 Round 62(期望、DFS、主席树、DP、逆推DP)

文章目录 牛客周赛 Round 62&#xff08;期望、DFS、主席树、DP、逆推DP&#xff09;A. 小红的字符移动B. 小红的数轴移动C. 小红的圆移动D. 小红的树上移动 (期望、DFS)E. F. 小红的中位数查询&#xff08;主席树&#xff09;G. 小红的数轴移动&#xff08;二&#xff09;&…

Windows下Jenkins控制台中文乱码

问题描述 问题情况如下图&#xff1a; 环境信息 Windows 11 家庭中文版java 21.0.4 2024-07-16 LTSJenkins 2.452.3 解决方法 增加系统JAVA_TOOL_OPTIONS&#xff0c;并设置值为-Dfile.encodingGBK。 打开设置方法&#xff1a;桌面上右键点击“此电脑”图标&#xff0c;选…

mysql设置表的某一个字段每天定时清零

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…

算法笔记(十三)——BFS 解决最短路问题

文章目录 迷宫中离入口最近的出口最小基因变化单词接龙为高尔夫比赛砍树 BFS 解决最短路问题 BFS(广度优先搜索) 是解决最短路径问题的一种常见算法。在这种情况下&#xff0c;我们通常使用BFS来查找从一个起始点到目标点的最短路径。 迷宫中离入口最近的出口 题目&#xff1a;…

Android SystemUI组件(11)SystemUIVisibility解读

该系列文章总纲链接&#xff1a;专题分纲目录 Android SystemUI组件 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节持续迭代之前章节思维导图&#xff0c;主要关注左侧最上方SystemUiVisibility解读部分即可。 本章节主要讲解SystemUiVisibility的概念及其相…

数据库(MySQL):使用命令从零开始在Navicat创建一个数据库及其数据表(一).创建基础表

一. 使用工具和命令 1.1 使用的工具 Navicat Premium 17 &#xff1a;“Navicat”是一套可创建多个连接的数据库管理工具。 MySQL版本8.0.39 。 1.2 使用的命令 Navicat中使用的命令 命令命令解释SHOW DATABASES&#xff1b;展示所有的数据库CREATE DATABASE 数据库名称; 创…