当前位置: 首页 > 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_) {} }; // 最小二乘法求圆心和半径 …...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...