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

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>

运行效果

在这里插入图片描述

相关文章:

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

什么是路径参数 在路由配置中&#xff0c;可以将【参数】放在【路由路径】中&#xff0c; 从而实现&#xff0c;同一个 路由&#xff0c;同一个组件&#xff0c;因路径参数不同&#xff0c;可以渲染出不同的内容。特点 &#xff1a; 1、当携带不同路径参数的路由相互跳转时&am…...

w7数据库基础之mysql函数

系统函数 1.version() --mysql版本 2.user() --当前登录的数据库用户名system_user() 3.database() --当前使用的数据库名。schema() 4.datadir --数据库路径 5.version_compile_os 操作系统版本&#xff0c;like 后面可以使用%%进行模糊查询。 6.hostname 当前机器…...

智能优化算法应用:基于人工蜂鸟算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于人工蜂鸟算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于人工蜂鸟算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.人工蜂鸟算法4.实验参数设定5.算法结果6.…...

Docker的基础使用

Docker的基础使用 Docker 是一个开放平台&#xff0c;用于开发、运输和运行应用程序。Docker 允许你将应用程序与基础架构分离&#xff0c;从而可以像管理应用程序一样快速交付软件。以下是 Docker 的详细使用指南&#xff1a; 安装 Docker 下载 Docker : 根据你的操作系统…...

Sass(Scss)、Less的区别与选择 + 基本使用

在前端开发中&#xff0c;CSS预处理器成为了提高样式表开发效率的重要工具。Sass&#xff08;以及其语法Scss&#xff09;和Less是两个最为流行的CSS预处理器&#xff0c;它们在语法、功能和用法上存在一些差异&#xff0c;因此在选择使用时需要考虑多个因素。 1. Sass 和 Les…...

GPT Zero 是什么?

from https://openaigptguide.com/gptzero/ 在人工智能技术飞速发展的今天&#xff0c;人们对于文字内容的准确性和可信度要求越来越高。例如在学术研究领域&#xff0c;防止抄袭和造假是非常重要的。而对于普通用户而言&#xff0c;辨别哪些内容是由人工智能生成的&#xff0…...

c++学习笔记-提高篇-案例2-员工分组(vector/multimap)

一、案例描述 公司今天招聘10个员工&#xff08;ABCDEFGHIJ&#xff09;,10名员工进入公司后&#xff0c;需要指派员工在哪个部门工作员工信息&#xff1a;姓名 工资组成&#xff1b;部门分为&#xff1a;策划、美术、研发随机给10名员工分配部门和工作通过multimap进行信息插…...

TrustZone之问答

以下问题有助于测试您的知识。 在Arm架构中&#xff0c;安全状态和物理地址空间分别是什么&#xff1f; 在Arm架构中&#xff0c;安全状态分为安全状态和非安全状态。物理地址空间分为安全物理地址空间和非安全物理地址空间。 在每个异常级别中&#xff0c;是什么确定处理器处于…...

vue3中新增的组合式API:ref、reactive、toRefs、computed、watch、provide/inject、$ref

在 Vue3 中&#xff0c;组合式 API 是一种新的编程模式&#xff0c;它允许你更灵活地组织和重用代码。组合式 API 主要包括以下几个部分&#xff1a; ref&#xff1a;用于创建响应式数据。reactive&#xff1a;用于创建一个响应式对象。toRefs&#xff1a;将一个响应式对象转换…...

Flask 密码重设系统

Flask 密码重设系统【源码来自编程浪子Flask点餐小程序】 web/templates/user/reset_pwd.html {% extends "common/layout_main.html" %} {% block content %} {% include "common/tab_user.html" %} <div class"row m-t user_reset_pwd_wrap&q…...

HarmonyOS4.0开发应用(四)【ArkUI状态管理】

ArkUI状态管理 分为以下四个: StateProp和LinkProvide和ConsumeObserved和ObjectLink State 相当于vue中data()内定义的属性变量&#xff0c;相当于react中useState()的使用,即绑定在视图上的响应式变量&#xff0c;可动态更新~ Tip: 标记的变量必须初始化&#xff0c;不可为空…...

JS常见正则表达式写法(附案例)

正则表达式方法示例: 1. test方法解析&#xff0c;test判断正则是否在字符串中出现过&#xff0c;如果出现返回true&#xff0c;如果没出现返回false。 let str hello world; let ret1 /e/.test(str); // true let ret2 /q/.test(str); // false 如&…...

go语言,ent库与gorm库,插入一条null值的time数据

情景介绍 使用go语言&#xff0c;我需要保存xxxTime的字段至数据库中&#xff0c;这个字段可能为空&#xff0c;也可能是一段时间。我采取的是统一先赋值为空&#xff0c;若有需要&#xff0c;则再进行插入&#xff08;需要根据另一个字段判断是否插入&#xff09; 在我的数据…...

Java EasyExcel 导入代码

Java EasyExcel 导入代码 导入方法 /*** 仓库库位导入** param req* param res* param files* throws Exception*/RequestMapping(value {"/import/line_store_locs"}, method {RequestMethod.POST})ResponseBodypublic void importStoreLoc(HttpServletRequest …...

2024,5G-A风起,中兴通讯破浪

对于通信圈而言&#xff0c;2024年最关键的里程碑&#xff0c;当属3GPP R18版本即将冻结。作为5G国际标准化组织&#xff0c;3GPP的意义是推动成员公司、工作组和技术规范的研究&#xff0c;让5G发展更有章法。 放眼整个5G技术的演进&#xff0c;其实大致分为两个阶段。第一阶段…...

SuperMap Hi-Fi 3D SDK for Unity矢量面贴地贴模型

作者&#xff1a;kele 一、背景 SuperMap Hi-Fi 3D SDK&#xff08;2023 11i&#xff09; for Unity推出新功能&#xff1a;支持矢量面同时贴地形图层和模型图层&#xff0c;并且能实现数据点击查询属性、更改初始填充颜色、初始边框线颜色、选中填充颜色、选中边框线颜色、控…...

【DB2】Maxlocks和防止锁升级

数据库在对行操作的时候&#xff0c;为了避免多个作业互相覆盖影响数据准确性&#xff0c;在进行操作&#xff08;尤其是写操作&#xff09;的时候会上锁&#xff0c;同一时间只有一个作业可以修改数值 对行上锁&#xff0c;为了记录锁的信息&#xff0c;所以会占用一定的内存…...

网工内推 | 网络服务工程师,HCIE认证优先,带薪年假,年终奖

01 高凌信息 招聘岗位&#xff1a;服务工程师&#xff08;珠海&#xff09; 职责描述&#xff1a; 1、负责华为数通&#xff08;交换机、路由器&#xff09;、IT&#xff08;服务器、存储&#xff09;等任一或多个产品领域的项目实施交付&#xff1b; 2、独立完成华为数通&…...

​TrustZone之可信固件

Trusted Firmware是Armv8-A设备的安全世界软件的开源参考实现。Trusted Firmware为SoC开发人员和OEM提供了一个符合相关Arm规格&#xff08;包括TBBR和SMCC&#xff09;的参考Trusted代码库。 以下图表显示了Trusted Firmware的结构&#xff1a; SMC调度程序处理传入的SMC。SMC…...

Visual Studio 2013 中创建一个基于 Qt 的动态链接库:并在MFC DLL程序中使用

在本地已经安装好 Qt 的情况下&#xff0c;按照以下步骤在 Visual Studio 2013 中创建一个基于 Qt 的动态链接库&#xff1a; 一、新建 Qt 项目&#xff1a; 在 Visual Studio 中&#xff0c;选择 “文件” -> “新建” -> “项目…”。在 “新建项目” 对话框中&#…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

结构化文件管理实战:实现目录自动创建与归类

手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题&#xff0c;进而引发后续程序异常。使用工具进行标准化操作&#xff0c;能有效降低出错概率。 需要快速整理大量文件的技术用户而言&#xff0c;这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB&#xff0c;…...