【vue-router】useRoute 和 useRouter 的区别

🚀 作者主页: 有来技术
🔥 开源项目: youlai-mall 🍃 vue3-element-admin 🍃 youlai-boot
🌺 仓库主页: Gitee 💫 Github 💫 GitCode
💖 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请纠正!

目录

  • 引言
  • 官方文档
  • useRoute 函数
  • useRouter 函数
  • useRoute 和 useRouter 区别
  • 结语
  • 开源项目

引言

在 Vue 3.2 中,Vue Router 提供了一些新的 API 以更好地与 Composition API 集成。其中,useRouteuseRouter 是两个重要的函数,用于在组件中访问当前路由信息和路由实例。在本文中,我们将探讨这两个函数的区别,并提供一些示例代码。

官方文档

https://router.vuejs.org/zh/api/#Functions-useRoute

useRoute 函数

useRoute 函数用于在组件中获取当前路由的信息,返回一个包含路由信息的对象。这个函数适用于那些不需要监听路由变化的场景,只是获取当前路由信息的静态数据。

示例代码:

<template><div><!-- 当前路由信息展示 --><h1>当前路由信息</h1><p>路径:{{ route.path }}</p><p>名称:{{ route.name }}</p><!-- 其他路由信息 --></div>
</template><script setup lang="ts">
import { useRoute } from 'vue-router';// 使用 useRoute 函数获取当前路由信息
const route = useRoute();
</script>

在这个示例中,我们使用 useRoute 获取当前路由信息,并在模板中显示了一些路由属性,比如路径和名称。

useRouter 函数

useRouter 函数用于获取路由实例,可以通过它来进行一些动态的路由操作,比如跳转到新的路由。它返回一个包含路由实例的对象。其中包括当前路由信息。
在这里插入图片描述

示例代码:

<template><div><!-- 路由操作 --><h1>路由操作</h1><button @click="navigateToHome">前往首页</button></div>
</template><script setup lang="ts">
import { useRouter } from 'vue-router';// 使用 useRouter 函数获取路由实例
const router = useRouter();// 处理按钮点击事件,进行路由跳转到首页
const navigateToHome = () => {// 使用 router.push 进行路由跳转router.push('/');
};
</script>

在这个示例中,我们使用 useRouter 获取路由实例,并通过点击按钮触发 navigateToHome 函数进行路由跳转。

useRoute 和 useRouter 区别

  • useRoute 主要用于获取当前路由的信息,适用于静态展示当前路由信息的场景。
  • useRouter 主要用于获取路由实例,适用于需要进行动态路由操作的场景,比如跳转到新的路由。

在一些场景中,我们可能需要同时使用这两个函数,例如在获取当前路由信息的同时,需要进行一些动态的路由操作。

示例代码:

<template><div><!-- 显示当前路由信息 --><h1>Current Route Information</h1><p>Path: {{ route.path }}</p><p>Name: {{ route.name }}</p><!-- 其他路由信息 --><!-- 跳转到 About 页面的按钮 --><button @click="navigateToHome">前往首页</button></div>
</template><script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';// 使用 useRoute 获取当前路由信息
const route = useRoute();// 使用 useRouter 获取路由实例
const router = useRouter();// 处理按钮点击事件,进行路由跳转
const navigateToHome= () => {// 使用 router.push 进行路由跳转router.push('/about');
};
</script>

在这个示例中,我们同时使用了 useRoute 获取当前路由信息和 useRouter 进行路由跳转。

结语

总体而言,useRouteuseRouter 是 Vue Router 在 Composition API 中提供的两个重要的函数,它们分别用于获取当前路由信息和路由实例,为我们在组件中更方便地处理路由相关逻辑提供了强大的工具。

开源项目

  • SpringCloud + Vue3 微服务商城
GithubGitee
后端youlai-mall 🍃youlai-mall 🍃
前端mall-admin🌺mall-admin 🌺
移动端mall-app 🍌mall-app 🍌
  • SpringBoot 3+ Vue3 单体权限管理系统
GithubGitee
后端youlai-boot 🍃youlai-boot 🍃
前端vue3-element-admin 🌺vue3-element-admin 🌺

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

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

相关文章

一起学docker系列之十四Dockerfile微服务实践

目录 1 前言2 创建微服务模块2.1 **创建项目模块**2.2 **编写业务代码** 3 编写 Dockerfile4 构建 Docker 镜像5 运行 Docker 容器6 测试微服务7 总结8 参考地址 1 前言 微服务架构已经成为现代软件开发中的一种重要方式。而 Docker 提供了一种轻量级、便携式的容器化解决方案…

业务运营常用的ChatGPT通用提示词模板

业务目标设定和策略制定&#xff1a;请帮助我设定明确的业务目标&#xff0c;并制定相应的运营策略&#xff0c;以便我能够更好地指导团队开展工作。 市场调研和分析&#xff1a;请帮助我进行市场调研和分析&#xff0c;包括竞争对手、市场规模、客户需求等方面的内容&#xf…

ESP32和ESP8266的ESP-MESH

ESP32和ESP8266的ESP-MESH 功能介绍一、介绍ESP-MESH二、安装painlessMesh库三、ESP-MESH基本示例&#xff08;广播消息&#xff09;四、示范 功能介绍 了解如何使用ESP-MESH网络协议通过ESP32和ESP8266 NodeMCU板构建网状网络。 ESP-MESH允许多个设备&#xff08;节点&#x…

位运算的高频算法题

关卡名 位运算的高频算法题 我会了✔️ 内容 1.理解位运算如何统计1的个数的 ✔️ 2.理解位运算如何实现加法 ✔️ 3.理解递归乘法是如何实现的 ✔️ 1 位移的妙用 位移操作是一个很重要的问题&#xff0c;可以统计数字中1的个数&#xff0c;在很多高性能软件中也大量应…

群晖NAS配置之自有服务器frp实现内网穿透

什么是frp frp 是一个专注于内网穿透的高性能的反向代理应用&#xff0c;支持 TCP、UDP、HTTP、HTTPS 等多种协议&#xff0c;且支持 P2P 通信。可以将内网服务以安全、便捷的方式通过具有公网 IP 节点的中转暴露到公网。今天跟大家分享一下frp实现内网穿透 为什么使用 frp &a…

基于瑞芯微rk3588+寒武纪 | 38TOPS INT8算力的AI边缘计算盒子,智能安防、智慧工地、智慧城管、智慧油站

边缘计算盒子 瑞芯微rk3588寒武纪 | 38TOPS INT8算力 ● 采用 Big-Little 大小核架构&#xff0c;搭载四核 A76四核 A55&#xff0c;CPU主频高达 2.4GHz &#xff0c;提供1MB L2 Cache 和 3MB L3 &#xff0c;Cache提供更强的 CPU 运算能力。 ● 高性能四核 Mali-G610 GPU&a…

【2024秋招】2023-9-22 金山云文档服务端开发一面

1 OS 1.1 堆和栈的区别&#xff0c;什么时候用到堆&#xff0c;什么时候用到栈呢 堆和栈是两种不同的内存分配方式&#xff0c;它们在计算机编程中有着各自的用途和特点。以下是它们之间的主要区别以及在何时使用它们&#xff1a; 1.1.1 堆&#xff08;Heap&#xff09;&…

在vue中如何书写 SSR 友好的代码

文章目录 前言服务端的响应性​组件生命周期钩子​访问平台特有 API​跨请求状态污染​激活不匹配​自定义指令​teleports​后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;vue.js &#x1f431;‍&#x1f453;博主在前端领域还有很多…

i++和++i的区别

i和i的区别 一、基本概念 两者的作用都是自增加1。 单独拿出来说的话&#xff0c;i和i&#xff0c;效果都是一样的&#xff0c;就是ii1 public static void main(String[] args) {int i 0;i;System.out.println(i);}public static void main(String[] args) {int i 0;i;Sys…

【开源】基于JAVA语言的校园电商物流云平台

项目编号&#xff1a; S 034 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S034&#xff0c;文末获取源码。} 项目编号&#xff1a;S034&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 商品数据模块2.3 快…

FH Admin Shiro反序列化漏洞复现

0x01 产品简介 FH Admin 是一款 java 快速开发平台。 0x02 漏洞概述 FH Admin CMS 存在 shiro 反序列化漏洞&#xff0c;该漏洞源于软件存在硬编码的 shiro-key&#xff0c;攻击者可利用该 key 生成恶意的序列化数据&#xff0c;在服务器上执行任意代码&#xff0c;执行系统命…

python自动化第二篇——合并ppt

简述 python合并ppt的方法有很多&#xff0c;但网上常说的python-pptx的方法&#xff0c;我用不了&#xff0c;这里我用了一个python-office的库。但又两个缺点&#xff0c;第一个生成的文档在你的用户名下的文档里&#xff0c;第二个是名字随机。 import office import os im…

华为OD机试真题-查找接口成功率最优时间段-2023年OD统一考试(C卷)

题目描述: 服务之间交换的接口成功率作为服务调用关键质量特性,某个时间段内的接口失败率使用一个数组表示,数组中每个元素都是单位时间内失败率数值,数组中的数值为0~100的整数,给定一个数值(minAverageLost)表示某个时间段内平均失败率容忍值,即平均失败率小于等于minA…

vue3-vite-ts:编写Rollup插件并使用 / 优化构建过程

一、vue3-vite-ts项目&#xff0c;编写Rollup插件并使用的意义 在使用Vue3 Vite TypeScript这种技术栈时&#xff0c;可以使用Rollup插件来优化构建过程&#xff0c;例如使用rollup-plugin-typescript2插件来编译TypeScript代码&#xff0c;使用rollup-plugin-vue插件来处理…

【开源】基于Vue+SpringBoot的康复中心管理系统

项目编号&#xff1a; S 056 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S056&#xff0c;文末获取源码。} 项目编号&#xff1a;S056&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员…

版本控制系统Git学习笔记-Git服务器

文章目录 概述一、协议1.1 本地协议1.2 HTTP协议1.3 SSH协议1.4 Git协议 二、在服务器上搭建 Git 四智武童 一月一&#xff0c;捡花衣。二月二&#xff0c;练大字。三月三&#xff0c;穿新衣。四月四&#xff0c;去考试。考一个状元郎&#xff0c;坐著马车平天下。 概述 Git访…

OpenStack-train版安装之安装Keystone(认证服务)、Glance(镜像服务)、Placement

安装Keystone&#xff08;认证服务&#xff09;、Glance&#xff08;镜像服务&#xff09;、Placement 安装Keystone&#xff08;认证服务&#xff09;安装Glance&#xff08;镜像服务&#xff09;安装Placement 安装Keystone&#xff08;认证服务&#xff09; 数据库创建、创…

WebSocket 实战:构建高效的实时应用

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

使用Spark写入数据到数据库表

项目场景&#xff1a; 使用Spark写入数据到数据库表 问题描述 Column "20231201" not found in schema Some(StructType(StructField(sdate,IntegerType,false),StructField(date_time,StringType,true),StructField(num,LongType,false),StructField(table_code,S…

数据结构详解各种算法

1、设有两个整型顺序表L1&#xff0c;L2&#xff0c;其元素值递增有序存放&#xff0c;请定义该顺序表的元素类型及表类型,设计以下自定义函数&#xff1a; &#xff08;1&#xff09;录入顺序表中所有元素的值。 &#xff08;2&#xff09;将顺序表L1&#xff0c;L2合并为到…