Vue3-26-路由-useRouter 和 useRoute 两个API 的作用介绍

先来说说两个API 的作用

useRouter() : 返回的是项目中的 路由实例的对象
可以通过这个实例对象进行路由的逻辑跳转

useRoute() : 返回的是当前的 路由对象
可以在当前路由对象中获取到路由名称、路由参数、路由路径等玩完整的路由信息。

写个案例看一下具体是什么

项目描述 : 
1、router.ts 文件中配置并导出了 router路由实例的对象;
2、main.ts 文件中 使用了 router 路由实例,这样 整个项目中就可以进行路由跳转了;
3、App.vue 作为根组件,使用 <router-view> 标签 展示路由的目标组件;
4、componentA.vue 和 componentB.vue 是两个普通的组件;
5、通过 在组件中 引入两个API 来探究这两个API 到底是什么。
项目的目录解构如下 :
projectName| -- index.html| -- src| -- App.vue| -- main.ts| -- router.ts| -- componentA.vue| -- componentB.vue

router.ts 文件


// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'// 引入两个组件
import componentA from "./componentA.vue";
import componentB from "./componentB.vue";// 声明路由跳转的路径与组件的对应关系
const routsList = [{path:'/a',component:componentA},{path:'/b',component:componentB},]// 创建路由的实例对象
const routerConfigObj = createRouter({history:createWebHistory('abc'), // 带一个参数,表示是路由的一个前缀routes:routsList // 指定路由的配置列表
})// 导出路由的对象
export default routerConfigObj;

main.ts 文件

import { createApp } from 'vue'// 导入 路由配置对象
import  routerConfigObj  from './router'// 根组件
import App from './App.vue'// 创建应用实例
const app = createApp(App)// 挂载路由组件 - 核心操作
app.use(routerConfigObj)// 挂在应用,渲染页面,这一步应该是在最后执行的
app.mount("#app")

App.vue文件

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br>   <!-- router-link 进行路由的导航 --><router-link to="/a">展示组件A</router-link><br><router-link to="/b">展示组件B</router-link><br><br><br><!-- router-view 进行目标组件的展示 --><router-view></router-view></div></template><script setup lang="ts">// 引入 provide 方法import { ref } from 'vue'// 引入路由配置实例 与 当前路由对象import { useRouter,useRoute} from 'vue-router'// 声明父组件的一个变量const msg = ref('这是App根组件的msg变量')// 接收一下路由实例对象 和 当前路由 对象const routerObj = useRouter();const currentRoute = useRoute();console.log('App.vue 中 路由实例对象 :',routerObj)console.log('App.vue 中 当前路由对象 :',currentRoute)</script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

componentA.vue 文件

<template><div class="diva">这是组件A</div></template><script setup lang="ts">// 引入两个路由相关的方法import { useRouter,useRoute} from 'vue-router';// 声明 路由实例对象 和 当前路由对象const routerObj = useRouter()const currentRoute = useRoute()// 打印一下路由实例对象 和 当前路由对象console.log('A 组件 中 路由实例对象 :',routerObj)console.log('A 组件 中 当前路由对象 :',currentRoute)</script><style scoped>.diva{width: 200px;height: 200px;background: red;}
</style>

componentB.vue文件

<template><div class="divb">这是组件B</div></template><script setup lang="ts">// 引入两个路由相关的方法import { useRouter,useRoute} from 'vue-router';// 声明 路由实例对象 和 当前路由对象const routerObj = useRouter()const currentRoute = useRoute()// 打印一下路由实例对象 和 当前路由对象console.log('B 组件 中 路由实例对象 :',routerObj)console.log('B 组件 中 当前路由对象 :',currentRoute)</script><style scoped>.divb{width: 200px;height: 200px;background: green;}
</style>

运行效果

初始状态 : 没有路由匹配的时候

在这里插入图片描述

路由到 A组件时

在这里插入图片描述

路由到 B组件时

在这里插入图片描述

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

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

相关文章

词法语法语义分析程序设计及实现,包含出错提示和错误恢复

词法说明 (1)关键字 main, int, char, if, else, for, while, void (2)运算符 - * / < < > > ! (3)界符 ; ( ) { } (4)标识符 ID letter(letter|digit)* (5)整型常数 NUM digit digit* (6)空格 ‘ ‘ ‘\n’ ‘\r’ ‘\t’ 空格用来分隔ID,NUM,运算符,界…

从AMI镜像恢复AWS Amazon Linux 2实例碰到的VNC服务以及Chrome浏览器无法启动的问题

文章目录 小结问题及解决VNC服务无法启动Chrome浏览器无法启动 参考 小结 将Amazon Linux 2保存为AMI (Amazon Machine Images)后&#xff0c;恢复成EC2 Instance (实例)后&#xff0c;VNC服务以及Chrome浏览器无法启动&#xff0c;进行了解决。 问题及解决 如果要将一个EC2…

从物联网到 3D 打印:硬件相关的开源项目概览 | 开源专题 No.52

arendst/Tasmota Stars: 20.4k License: GPL-3.0 Tasmota 是一款为 ESP8266 和 ESP32 设备提供的替代固件&#xff0c;具有易于配置的 webUI、OTA 更新、定时器或规则驱动的自动化功能以及通过 MQTT、HTTP、串口或 KNX 进行完全本地控制。该项目主要特点包括&#xff1a; 支持…

2024年上海中考数学提分的有效方法:吃透近十年中考数学真题

再过两天2023年就翻篇了&#xff0c;进入2024年&#xff0c;初三的学子们可能立刻就感觉到中考就在眼前。根据教育部门官方发消息&#xff0c;2024年中考日期安排在2024年6月19-21日&#xff0c;也意味着距离中考还有6个月多一点。 那么如何充分利用这最后的六个多月&#xff…

部署谷歌的Gemini大模型

前言 本文将介绍如何使用Docker、Docker-Compose私有化部署谷歌的Gemini大模型&#xff0c;以及没有服务器的情况下如何使用Vercel来部署。 Demo: 使用新加坡云服务器部署&#xff1a;Gemini Pro Chat (snowice.eu.org) 使用Vercel部署&#xff1a;Gemini Pro Chat (snowice.eu…

基于JAVA的考研专业课程管理系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 考研高校模块2.3 高校教师管理模块2.4 考研专业模块2.5 考研政策模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 考研高校表3.2.2 高校教师表3.2.3 考研专业表3.2.4 考研政策表 四、系统展示五、核…

实现 Spring Boot 项目热重载,无需重启,省时省力

实现 Spring Boot 项目热重载&#xff0c;无需重启&#xff0c;省时省力 插件介绍 通过 JRebel 插件 实现 Spring Boot 项目热重载。类似于前端 Webpack 热重载功能 无需重启&#xff0c;省时省力 安装插件 打开 IDEA 在插件中搜索&#xff1a;JRebel 安装成功后重启IDEA …

Windows Sockets 2 笔记

文章目录 一、Winsock简介二、Windows中Winsock对网络协议支持的情况三、使用Winsock3.1 关于服务器和客户端3.2 创建基本Winsock应用程序3.3 初始化Winscok3.3.1 初始化步骤3.3.2 初始化的核心代码3.3.3 WSAStartup函数的协调3.3.4 WSACleanup函数3.3.5 初始化的完整代码 3.4 …

如何理解Go语言的数组

什么是数组 首先下一个定义&#xff0c;数组是对线性的内存区域的抽象。高维数组和一维数组有着同样的内存布局。&#xff08;大学生考试的时候别借鉴哈&#xff0c;这是自己下的定义&#xff0c;相当于是一篇议论文的论点。&#xff09; 线性的内存区域说白了就是连续的内存…

【Vue】使用Axios请求下载后端返回的文件流,并能够提示后端报错信息

【需求】使用Axios请求下载后端返回的文件流&#xff0c;下载失败时提示信息不写死&#xff0c;按照后端返回的信息进行提示。 一、需求分析 看到这个需求的时候&#xff0c;有人可能会很疑惑&#xff0c;这不是直接就能获取到吗&#xff0c;直接message.error()弹框就完事了&…

【实用工具】Gradio快速部署深度学习应用1:图像分类

前言 在AI快速发展的今天&#xff0c;我们作为算法开发人员&#xff0c;也应该有一些趁手的工具帮助我们快速开发并验证自己的想法&#xff0c;Gradio可以实现快速搭建和共享的功能&#xff0c;能够展示出一个前端界面&#xff0c;把我们的算法包裹起来&#xff0c;快速验证算…

智能硬件(8)之蜂鸣器模块

学好开源硬件&#xff0c;不仅仅需要会编程就可以了&#xff0c;电路基础是很重要的&#xff1b;软件和硬件都玩的溜&#xff0c;才是高手&#xff0c;那么小编为了方便大家的学习&#xff0c;特别画了一块智能传感器板子&#xff0c;来带领大家学习电路基础&#xff0c;玩转智…

贪心算法Part01 455分发饼干

455分发饼干 376摆动序列 53 最大子数组和

cesium实现区域贴图及加载多个gif动图

1、cesium加载多个gif动图 Cesium的Billboard支持单帧纹理贴图&#xff0c;如果能够将gif动图进行解析&#xff0c;获得时间序列对应的每帧图片&#xff0c;然后按照时间序列动态更新Billboard的纹理&#xff0c;即可实现动图纹理效果。为此也找到了相对于好一点的第三方库libg…

汽车制造厂批量使用成华制造弹簧平衡器

数年来&#xff0c;成华制造都在不断的向各行各界输出着自己的起重设备&#xff0c;与众多企业达成合作&#xff0c;不断供应优质产品。近些年&#xff0c;成华制造以其卓越的产品质量和高效的生产能力&#xff0c;成功实现了弹簧平衡器的大规模批量供应&#xff0c;为重庆数家…

子网掩码与IP段计算

一.什么叫子网掩码&#xff1a; 子网掩码(subnet mask)又叫网络掩码、地址掩码、子网络遮罩&#xff0c;它用来指明一个IP地址的哪些位标识的是主机所在的子网&#xff0c;以及哪些位标识的是主机的位掩码。子网掩码不能单独存在&#xff0c;它必须结合IP地址一起使用。 子网掩…

MySQL数据库的安装与环境配置

下载 下载MySQL8 安装 解压 配置MySQL环境变量 系统环境变量path D:\ProgramFiles\mysql-8.0.20-winx64\bin 1.点击属性 2.点击高级系统设置 3.点击环境变量 4.在系统变量中找到path 注意这里不是用户变量 5.新建后输入解压的地址 MySQL初始化和启动 以管理员身份运行cmd…

如何使用ArcGIS Pro自动矢量化建筑

相信你在使用ArcGIS Pro的时候已经发现了一个问题&#xff0c;那就是ArcGIS Pro没有ArcScan&#xff0c;在ArcGIS Pro中&#xff0c;Esri确实已经移除了ArcScan&#xff0c;没有了ArcScan我们如何自动矢量化地图&#xff0c;从地图中提取建筑等要素呢&#xff0c;这里为大家介绍…

基于大语言模型LangChain框架:知识库问答系统实践

ChatGPT 所取得的巨大成功&#xff0c;使得越来越多的开发者希望利用 OpenAI 提供的 API 或私有化模型开发基于大语言模型的应用程序。然而&#xff0c;即使大语言模型的调用相对简单&#xff0c;仍需要完成大量的定制开发工作&#xff0c;包括 API 集成、交互逻辑、数据存储等…