当前位置: 首页 > news >正文

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 需要使用 createRoutercreateWebHistory 创建路由,并且 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 使用 useRouteruseRoute 访问路由:

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 可以用 useRouteruseRoute 获取路由信息,Vue 2 仍使用 this.$routerthis.$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函数名 &#xff08;&#xff09; 参数表 #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); …...

终极版已激活!绿话纯净,打开即用!!!

今天我想和大家聊聊一个非常实用的工具——视频转换大师最终版。 视频转换大师终极版&#xff0c;堪称一款全能型的视频制作神器&#xff0c;集视频转换与编辑功能于一体。它搭载的视频增强器技术&#xff0c;能够最大限度地保留原始视频质量&#xff0c;甚至还能实现质量的进…...

Vue.js 什么是 Composition API?

Vue.js 什么是 Composition API&#xff1f; 今天我们来聊聊 Vue 3 引入的一个重要特性&#xff1a;组合式 API&#xff08;Composition API&#xff09;。如果你曾在开发复杂的 Vue 组件时感到代码难以维护&#xff0c;那么组合式 API 可能正是你需要的工具。 什么是组合式 …...

MySQL高可用

一、mysql路由 1.利用路由器的连接路由特性&#xff0c;用户可以编写应用程序来连接到路由器&#xff0c;并令路由器使用响应的路由策略来处理连接来使其连接到正确的mysql数据库服务器 2.mysql route的部署方式 需要在所有数据库主机之外再打开一台主机mysql-router 配置mysql…...

30.Word:设计并制作新年贺卡以及标签【30】

目录 NO1.2 NO3邮件合并-信函 NO4邮件合并-标签​ NO1.2 另存为/F12&#xff1a;考生文件夹&#xff1a;Word.docx布局→页面设置对话框→页边距&#xff1a;上下左右→纸张&#xff1a;宽度/高度&#xff08;先调页边距&#x1f197;&#xff09;设计→页面颜色→填充效果→…...

Flink2支持提交StreamGraph到Flink集群

最近研究Flink源码的时候&#xff0c;发现Flink已经支持提交StreamGraph到集群了&#xff0c;替换掉了原来的提交JobGraph。 新增ExecutionPlan接口&#xff0c;将JobGraph和StreamGraph作为实现。 Flink集群Dispatcher也进行了修改&#xff0c;从JobGraph改成了接口Executio…...

大模型本地化部署(Ollama + Open-WebUI)

文章目录 环境准备下载Ollama模型下载下载Open-WebUI 本地化部署的Web图形化界面本地模型联网查询安装 Docker安装 SearXNG本地模型联网查询 环境准备 下载Ollama 下载地址&#xff1a;Ollama网址 安装完成后&#xff0c;命令行里执行命令 ollama -v查看是否安装成功。安装成…...

C++哈希(链地址法)(二)详解

文章目录 1.开放地址法1.1key不能取模的问题1.1.1将字符串转为整型1.1.2将日期类转为整型 2.哈希函数2.1乘法散列法&#xff08;了解&#xff09;2.2全域散列法&#xff08;了解&#xff09; 3.处理哈希冲突3.1线性探测&#xff08;挨着找&#xff09;3.2二次探测&#xff08;跳…...

IME关于输入法横屏全屏显示问题-Android14

IME关于输入法横屏全屏显示问题-Android14 1、输入法全屏模式updateFullscreenMode1.1 全屏模式判断1.2 全屏模式布局设置 2、应用侧关闭输入法全屏模式2.1 调用输入法的应用设置flag2.2 继承InputMethodService.java的输入法应用覆盖onEvaluateFullscreenMode方法 InputMethod…...

网络工程师 (11)软件生命周期与开发模型

一、软件生命周期 前言 软件生命周期&#xff0c;也称为软件开发周期或软件开发生命周期&#xff0c;是指从软件项目的启动到软件不再被使用为止的整个期间。这个过程可以细分为多个阶段&#xff0c;每个阶段都有其特定的目标、任务和产出物。 1. 问题定义与需求分析 问题定义…...

【人工智能】基于Python的机器翻译系统,从RNN到Transformer的演进与实现

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 机器翻译(Machine Translation, MT)作为自然语言处理领域的重要应用之一,近年来受到了广泛的关注。在本篇文章中,我们将详细探讨如何使…...

网络工程师 (12)软件开发与测试

一、软件设计 &#xff08;一&#xff09;定义与目的 软件设计是从软件需求出发&#xff0c;设计软件的整体结构、功能模块、实现算法及编写代码的过程&#xff0c;旨在确定系统如何完成预定任务。其目标是确保目标系统能够抽象、普遍地完成预定任务&#xff0c;并为后续的软件…...

3.Spring-事务

一、隔离级别&#xff1a; 脏读&#xff1a; 一个事务访问到另外一个事务未提交的数据。 不可重复读&#xff1a; 事务内多次查询相同条件返回的结果不同。 幻读&#xff1a; 一个事务在前后两次查询同一个范围的时候&#xff0c;后一次查询看到了前一次查询没有看到的行。 二…...

Python字典详解:从入门到实践

Python字典详解&#xff1a;从入门到实践 字典&#xff08;Dictionary&#xff09;是Python中最重要且最常用的数据结构之一。本文将深入讲解字典的特性、操作方法和实际应用案例。 1. 字典简介 字典是可变的、无序的键值对集合&#xff0c;使用{}创建。每个元素由key: valu…...

91,【7】 攻防世界 web fileclude

进入靶场 <?php // 包含 flag.php 文件 include("flag.php");// 以高亮语法显示当前文件&#xff08;即包含这段代码的 PHP 文件&#xff09;的内容 // 方便查看当前代码结构和逻辑&#xff0c;常用于调试或给解题者提示代码信息 highlight_file(__FILE__);// 检…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...