vue2和vue3路由封装及区别
Vue 2 和 Vue 3 在路由封装方面有一些区别,主要体现在 Vue Router 版本的升级(Vue Router 3 -> Vue Router 4)上。下面我们来对比一下 Vue 2 和 Vue 3 在路由封装上的主要区别,并提供相应的代码示例。
1. Vue 2 路由封装(基于 Vue Router 3)
Vue 2 使用 Vue.use(VueRouter) 注册路由,并且 new VueRouter({}) 创建路由实例。
安装 Vue Router 3
npm install vue-router@3
router/index.js(Vue 2 版)
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";Vue.use(VueRouter);const routes = [{path: "/",name: "Home",component: Home,},{path: "/about",name: "About",component: About,},
];const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes,
});export default router;
main.js(Vue 2 版)
import Vue from "vue";
import App from "./App.vue";
import router from "./router";Vue.config.productionTip = false;new Vue({router, // 挂载路由render: (h) => h(App),
}).$mount("#app");
2. Vue 3 路由封装(基于 Vue Router 4)
Vue 3 需要使用 createRouter 和 createWebHistory 创建路由,并且 app.use(router) 挂载。
安装 Vue Router 4
npm install vue-router@4
router/index.js(Vue 3 版)
import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";const routes = [{path: "/",name: "Home",component: Home,},{path: "/about",name: "About",component: About,},
];const router = createRouter({history: createWebHistory(),routes,
});export default router;
main.js(Vue 3 版)
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";const app = createApp(App);app.use(router); // 挂载路由
app.mount("#app");
3. Vue 2 和 Vue 3 路由封装的主要区别
| 对比项 | Vue 2 (Vue Router 3) | Vue 3 (Vue Router 4) |
|---|---|---|
| 路由注册 | Vue.use(VueRouter) | createRouter() + app.use(router) |
| 路由实例创建 | new VueRouter({}) | createRouter({}) |
| 路由模式 | mode: 'history' / mode: 'hash' | history: createWebHistory() / createWebHashHistory() |
router.beforeEach | 直接使用 router.beforeEach | 直接使用 router.beforeEach |
this.$router | 组件内部可用 | 组件内部可用 |
this.$route | 组件内部可用 | 组件内部可用 |
router.push() | this.$router.push('/about') | this.$router.push('/about') |
4. 路由守卫封装
Vue 2 全局前置守卫
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated()) {next("/login");} else {next();}
});
Vue 3 全局前置守卫(写法一致)
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated()) {next("/login");} else {next();}
});
5. 动态路由注册
Vue 2 添加动态路由
router.addRoutes([{path: "/dynamic",name: "Dynamic",component: () => import("@/views/Dynamic.vue"),},
]);
Vue 3 添加动态路由(不同)
router.addRoute({path: "/dynamic",name: "Dynamic",component: () => import("@/views/Dynamic.vue"),
});
6. 路由懒加载
Vue 2 和 Vue 3 的路由懒加载写法基本相同:
const routes = [{path: "/",name: "Home",component: () => import("@/views/Home.vue"),},
];
7. setup 中使用路由(Vue 3 专属)
Vue 3 组合式 API 使用 useRouter 和 useRoute 访问路由:
import { useRouter, useRoute } from "vue-router";
import { onMounted } from "vue";export default {setup() {const router = useRouter();const route = useRoute();onMounted(() => {console.log("当前路径:", route.path);});const goToHome = () => {router.push("/");};return { goToHome };},
};
8. 结论
- Vue 3 需要使用
createRouter,不再使用Vue.use(VueRouter)。 - Vue 3 需要
app.use(router)挂载,而 Vue 2 在new Vue({ router })中挂载。 - Vue 3 组合式 API 可以用
useRouter和useRoute获取路由信息,Vue 2 仍使用this.$router和this.$route。 addRoutes改为addRoute,但功能类似。
总体来说,Vue 3 使路由 API 变得更加模块化,适配了 setup 语法,但大多数核心概念和 Vue 2 保持一致。
你是要封装 Vue 3 版本的路由吗?还是希望对 Vue 2 的封装进行优化?
相关文章:
vue2和vue3路由封装及区别
Vue 2 和 Vue 3 在路由封装方面有一些区别,主要体现在 Vue Router 版本的升级(Vue Router 3 -> Vue Router 4)上。下面我们来对比一下 Vue 2 和 Vue 3 在路由封装上的主要区别,并提供相应的代码示例。 1. Vue 2 路由封装&#…...
Windows 系统下使用 Ollama 离线部署 DeepSeek - R1 模型指南
引言 随着人工智能技术的飞速发展,各类大语言模型层出不穷。DeepSeek - R1 凭借其出色的语言理解和生成能力,受到了广泛关注。而 Ollama 作为一款便捷的模型管理和部署工具,能够帮助我们轻松地在本地环境中部署和使用模型。本文将详细介绍如…...
性能测试网络风险诊断有哪些?
目录 一、网络定位分析手段 二、sar命令 三、netstat命令 以下是几种常见的网络风险诊断方法 网络连通性检查 带宽与延迟测量 丢包率分析 网络拓扑结构审查 安全设备影响评估 协议层面上的优化 负载均衡器效能检验 云化服务架构下的特殊考量 系统应用之间的交换&am…...
八股文 (一)
文章目录 项目地址一、前端1.1 大文件上传,预览1.2 首页性能优化1.2 流量染色,灰度发布1.3 Websock心跳机制,大数据实时数据优化1.4 Gpu 加速 fps优化1.5 echarts包大小优化和组件封装1.6 前端监控系统1.7 超大虚拟列表卡顿1. 实现2. 相关问题(1) 什么是虚拟化列表,为什么要…...
TVM调度原语完全指南:从入门到微架构级优化
调度原语 在TVM的抽象体系中,调度(Schedule)是对计算过程的时空重塑。每一个原语都是改变计算次序、数据流向或并行策略的手术刀。其核心作用可归纳为: 优化目标 max ( 计算密度 内存延迟 指令开销 ) \text{优化目标} \max…...
c语言进阶(简单的函数 数组 指针 预处理 文件 结构体)
c语言补充 格式 void函数头 {} 中的是函数体 sum函数名 () 参数表 #include <stdio.h>void sum(int begin, int end) {int i;int sum 0;for (i begin ; i < end ; i) {sum i;}printf("%d到%d的和是%d\n", begin, end, sum); …...
终极版已激活!绿话纯净,打开即用!!!
今天我想和大家聊聊一个非常实用的工具——视频转换大师最终版。 视频转换大师终极版,堪称一款全能型的视频制作神器,集视频转换与编辑功能于一体。它搭载的视频增强器技术,能够最大限度地保留原始视频质量,甚至还能实现质量的进…...
Vue.js 什么是 Composition API?
Vue.js 什么是 Composition API? 今天我们来聊聊 Vue 3 引入的一个重要特性:组合式 API(Composition API)。如果你曾在开发复杂的 Vue 组件时感到代码难以维护,那么组合式 API 可能正是你需要的工具。 什么是组合式 …...
MySQL高可用
一、mysql路由 1.利用路由器的连接路由特性,用户可以编写应用程序来连接到路由器,并令路由器使用响应的路由策略来处理连接来使其连接到正确的mysql数据库服务器 2.mysql route的部署方式 需要在所有数据库主机之外再打开一台主机mysql-router 配置mysql…...
30.Word:设计并制作新年贺卡以及标签【30】
目录 NO1.2 NO3邮件合并-信函 NO4邮件合并-标签 NO1.2 另存为/F12:考生文件夹:Word.docx布局→页面设置对话框→页边距:上下左右→纸张:宽度/高度(先调页边距🆗)设计→页面颜色→填充效果→…...
Flink2支持提交StreamGraph到Flink集群
最近研究Flink源码的时候,发现Flink已经支持提交StreamGraph到集群了,替换掉了原来的提交JobGraph。 新增ExecutionPlan接口,将JobGraph和StreamGraph作为实现。 Flink集群Dispatcher也进行了修改,从JobGraph改成了接口Executio…...
大模型本地化部署(Ollama + Open-WebUI)
文章目录 环境准备下载Ollama模型下载下载Open-WebUI 本地化部署的Web图形化界面本地模型联网查询安装 Docker安装 SearXNG本地模型联网查询 环境准备 下载Ollama 下载地址:Ollama网址 安装完成后,命令行里执行命令 ollama -v查看是否安装成功。安装成…...
C++哈希(链地址法)(二)详解
文章目录 1.开放地址法1.1key不能取模的问题1.1.1将字符串转为整型1.1.2将日期类转为整型 2.哈希函数2.1乘法散列法(了解)2.2全域散列法(了解) 3.处理哈希冲突3.1线性探测(挨着找)3.2二次探测(跳…...
IME关于输入法横屏全屏显示问题-Android14
IME关于输入法横屏全屏显示问题-Android14 1、输入法全屏模式updateFullscreenMode1.1 全屏模式判断1.2 全屏模式布局设置 2、应用侧关闭输入法全屏模式2.1 调用输入法的应用设置flag2.2 继承InputMethodService.java的输入法应用覆盖onEvaluateFullscreenMode方法 InputMethod…...
网络工程师 (11)软件生命周期与开发模型
一、软件生命周期 前言 软件生命周期,也称为软件开发周期或软件开发生命周期,是指从软件项目的启动到软件不再被使用为止的整个期间。这个过程可以细分为多个阶段,每个阶段都有其特定的目标、任务和产出物。 1. 问题定义与需求分析 问题定义…...
【人工智能】基于Python的机器翻译系统,从RNN到Transformer的演进与实现
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 机器翻译(Machine Translation, MT)作为自然语言处理领域的重要应用之一,近年来受到了广泛的关注。在本篇文章中,我们将详细探讨如何使…...
网络工程师 (12)软件开发与测试
一、软件设计 (一)定义与目的 软件设计是从软件需求出发,设计软件的整体结构、功能模块、实现算法及编写代码的过程,旨在确定系统如何完成预定任务。其目标是确保目标系统能够抽象、普遍地完成预定任务,并为后续的软件…...
3.Spring-事务
一、隔离级别: 脏读: 一个事务访问到另外一个事务未提交的数据。 不可重复读: 事务内多次查询相同条件返回的结果不同。 幻读: 一个事务在前后两次查询同一个范围的时候,后一次查询看到了前一次查询没有看到的行。 二…...
Python字典详解:从入门到实践
Python字典详解:从入门到实践 字典(Dictionary)是Python中最重要且最常用的数据结构之一。本文将深入讲解字典的特性、操作方法和实际应用案例。 1. 字典简介 字典是可变的、无序的键值对集合,使用{}创建。每个元素由key: valu…...
91,【7】 攻防世界 web fileclude
进入靶场 <?php // 包含 flag.php 文件 include("flag.php");// 以高亮语法显示当前文件(即包含这段代码的 PHP 文件)的内容 // 方便查看当前代码结构和逻辑,常用于调试或给解题者提示代码信息 highlight_file(__FILE__);// 检…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序(Program) 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序,比如我们使用QQ,就启动了一个进程,操作系统就会为该进程分配内存…...
