Vue3-27-路由-路径参数的简单使用

什么是路径参数

在路由配置中,可以将【参数】放在【路由路径】中,
从而实现,同一个 路由,同一个组件,因路径参数不同,可以渲染出不同的内容。特点 :
1、当携带不同路径参数的路由相互跳转时,组件实例可以直接被重复使用,无需销毁重建,因此效率高;
2、但是,上述的跳转无法调用组件的声明周期钩子,因为组件根本不会重新加载。
3、路径参数可以有多个;
4、路径参数可以在组件中通过 useRoute() API 返回的  当前路由对象 获取到。
5、路径参数可以使用正则表达式的方式进行匹配 (本文暂不涉及)。
路径参数 定义的语法格式 :【:参数名】
路径参数 使用的语法格式 : 当前路由对象中的 params 属性 包含了对应的参数。

基本使用案例

案例说明 :
1、定义了一个包含【路径参数】的路由配置;
2、定义了一个组件,组件中获取到路径参数,并打印出来。

路由配置文件

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

路由目标组件componentC.vue代码 : 查看 路径参数

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

App.vue 代码 : <router-view> 标签展示路由目标组件

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br>   <br><br><br><!-- router-view 进行目标组件的展示 --><router-view></router-view></div></template><script setup lang="ts">// 引入 provide 方法import { ref } from 'vue'// 声明父组件的一个变量const msg = ref('这是App根组件的msg变量')</script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

运行效果

在这里插入图片描述

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

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

相关文章

【论文阅读】Realtime multi-person 2d pose estimation using part affinity fields

OpenPose&#xff1a;使用PAF的实时多人2D姿势估计。 code&#xff1a;GitHub - ZheC/Realtime_Multi-Person_Pose_Estimation: Code repo for realtime multi-person pose estimation in CVPR17 (Oral) paper&#xff1a;[1611.08050] Realtime Multi-Person 2D Pose Estima…

Bind for 0.0.0.0:2379 failed: port is already allocated

1、执行命令docker-compose -p docker-apisix up -d 报错 Error response from daemon: driver failed programming external connectivity on endpoint docker-apisix-etcd-1 (2a92a0cefff9194fcd1dad4bdeabf4201d9047ec2633eda455c6e46528668af4): Bind for 0.0.0.0:2379 fa…

NLP论文阅读记录 - 02 | 2022 自动文本摘要方法:综合回顾

文章目录 前言0、论文摘要一、Introduction1.1文本摘要的要求1.2主要研究贡献 二.ATS的分类2.1基于没有。输入文档的数量2.2 基于总结方法2.3 基于输出摘要性质&#xff1a;2.4 基于摘要语言2.4.1 基于摘要算法2.5 基于摘要内容2.6 基于摘要类型2.7 基于概括域2.8 基于加工水平…

Your password does not satisfy the current policy requirements

密码策略问题异常信息&#xff1a; ERROR 1819 (HY000): Your password does not satisfy the current policy requirements1、查看 mysql 初始的密码策略&#xff0c; 输入语句 “ SHOW VARIABLES LIKE validate_password%; ” 进行查看 2.首先需要设置密码的验证强度等级&am…

如何查看官方文档(第410篇)

让自己更加值钱,考专业证,提升学历,提升专业技能。 一 让AI告诉你 如何查看官方文档(第410篇) 要查看MySQL官方文档的详细过程,可以按照以下步骤进行: 1. 打开MySQL官方文档的主页:https://dev.mysql.com/doc/refman/2. 在搜索框中输入您要查找的主题,并按Enter键。3.…

React Query 实战教程:在 React 中如何优雅的管理接口数据状态?

前言 如何通过Ajax或者Fetch优雅的请求后端接口&#xff0c;这是所有复杂前端项目都需要考虑处理的事情。在React项目中&#xff0c;有不少成熟的Hook能够让开发者管理整个请求过程中的数据和状态&#xff0c;例如 axios-hooks、use-http、react-query、swr甚至 ahook中提供的…

嵌入式开发——GD32F4的I2C查询

SCL SDA TXFRAME SMBA I2C0 PB6,PB8 PB7,PB9 PB4 PB5 I2C1 PB10,PF1,PH4 PF0,PH5,PB11,PC12,PB3 PF3,PH3,PB13 PF2,PH6,PB12 I2C2 PA8,PH7 PH8,PC9,PB4 PA10,PH10 PA9,PH9

删除数据后, redis 内存占用还是很高怎么办?

现象&#xff1a; reids 做了数据删除&#xff0c;数据量不大&#xff0c;使用 top 命令看&#xff0c;发现还是占用大量内存 原因&#xff1a; 1.redis 底层内存根据内存分配器分配&#xff0c;不会立刻释放 2.redis 释放的内存空间不是连续的&#xff0c;存在碎片 内存碎…

编译错误:C4056E type of input file ‘xxx‘ unknown

最近在Proteus上面进行仿真&#xff0c;将编译后的hex文件导入到电路图中&#xff0c;进行程序运行的时候&#xff0c;Proteus报了这么一个错误&#xff1a;Error: C4065E: type of input file Pian unknown 我上网一搜&#xff0c;好像与文件名称中存在空格有关&#xff0c;导…

百度飞桨文心生态成果最新披露:开发者达1070万 模型数超86万

12月28日&#xff0c;由深度学习技术及应用国家工程研究中心主办的WAVE SUMMIT深度学习开发者大会2023在北京召开。百度首席技术官、深度学习技术及应用国家工程研究中心主任王海峰现场公布了飞桨文心五载十届最新生态成果&#xff0c;文心一言最新用户规模破1亿&#xff0c;截…

uniapp 新建组件

1. 新建文件夹 components 文件夹名称必须是 components &#xff0c;否则组件无法自动导入 2. 新建组件 3. 编辑组件 components/logo/logo.vue <template><img src"https://img.alicdn.com/imgextra/i1/O1CN01EI93PS1xWbnJ87dXX_!!6000000006451-2-tps-150-15…

BP神经网络详细原理,BP神经网络训练界面详解,基于BP神经网络的公司财务风险分类

目录 摘要 BP神经网络参数设置及各种函数选择 参数设置 训练函数 传递函数 学习函数 性能函数 显示函数 前向网络创建函数 BP神经网络训练窗口详解 训练窗口例样 训练窗口四部详解 基于BP神经网络的公司财务风险分类 完整代码下载链接:基于BP神经网络的公司财务风险分类(代码…

mac 安装pyaudio

直接安装pyaudio时报错 ERROR: Could not build wheels for PyAudio, which is required to install pyproject.toml-based projects需要先安装portaudio&#xff0c;打开终端执行&#xff1a; brew install portaudio再安装pyaudio成功 pip3 install pyaudioportaudio是一个…

Java中的锁(二)

锁从不同的角度有不同的分类&#xff0c;从线程是否需要锁住同步资源角度来分&#xff0c;可以分为&#xff1a;悲观锁和乐观锁。 一、悲观锁、乐观锁的定义 悲观锁就是我们常说到的锁。对于悲观锁来说&#xff0c;他总是认为每次访问共享资源时会发生冲突&#xff08;认为别的…

CNN实现对手写字体的迭代

导入库 import torchvision import torch from torchvision.transforms import ToTensor from torch import nn import matplotlib.pyplot as plt 导入手写字体数据 train_dstorchvision.datasets.MNIST(data/,trainTrue,transformToTensor(),downloadTrue) test_dstorchvis…

Windows实现MySQL5.7主从复制(详细版)

使用免安装版本&#xff08;官网下载地址&#xff09; 在Windows上安装两种MySQL服务并同时开启服务 1.下载配置 打开解压文件所在位置&#xff0c;就新建一个配置文件my.ini。 2.主库安装 主库的my.ini配置文件如下&#xff1a; [mysqld] #设置主库端口&#xff0c;注意须是…

uniapp开发移动端遇到的问题记录

1. 键盘弹起时页面整体上移问题 很常见但我解决过程中遇到了很多问题 我的键盘没有遮盖到输入框&#xff0c;但手机键盘弹起后&#xff0c;form部分会整体上移一点&#xff0c;并且底部的操作也会弹到键盘上方 网上写得很复杂&#xff0c;什么动态赋值高度balabala。看到有一…

英文vos安装,vos3000 web3.0

英文vos安装&#xff0c;vos3000英文软件工具安装&#xff0c;Web V3.0是一个安全且强大的批发 VOIP 计费解决方案&#xff0c;具有新的 Web 界面和无与伦比的令人惊叹的新功能。现在使用移动应用程序或网络浏览器控制您的 VOS3000 VOIP 计费服务器 yumsed -i "s|enabled…

使用pytorch搭建ResNeXt并基于迁移学习训练

冻结除最后全连接层以外的所有权重&#xff0c;只去单独训练它最后一层的的权重&#xff0c;这个方法&#xff0c;冻结了所有网络的权重。 for param in net.parameters():param.requires_grad False

测试熟悉新技术

一&#xff1a;redis 1.定义 简单来说 redis 就是key-value 类型的数据库&#xff0c;不过与传统数据库不同的是 redis 的数据是存在内存中的&#xff0c;所以读写速度非常快&#xff0c;因此 redis 被广泛应用于缓存方向,它有5种基本数据类型&#xff1a; String&#xff08;…