vue3学习3-route

news/2025/2/25 9:39:23

创建路由器:

应用路由器:

路由展示区RouterView 和 路由跳转RouterLink:

路由组件(在路由配置文件中配置的)一般放到pages/views文件夹下

路由组件切换的时候执行的是 挂载/卸载操作 onMounted / onUnmouted

路由器两种工作模式:

1、history模式:

2、hash模式:

createHashHistory()

to的两种写法:

第二种写法可以根据路由的name和path跳转:

嵌套路由:

子级路由的path不用加 /

两种路由传参:query和params传参

1、query直接在路径中加?拼接参数

使用useRoute().query接收参数

第二种写法:

2、params传参

必须在路由配置文件中提前占位

直接在路径中传参,只能用路由中的name属性,不能用path属性

接收参数

通过props:true属性设置子组件的props,并在子组件中通过defineProps进行接收(只用params参数可用,query参数不可用)

第二种写法,如果是query参数,可以自己决定将什么作为props传递:

=

第三种写法,直接返回写死的对象

路由 replace属性

路由默认是push堆栈模式,可以加上replace替换为replace属性

编程式路由导航(脱离RouterLink实现路由跳转):

两种跳转方式,push和replace

router.push中可以和RouterLink中的to属性一样的写法,可以传query和params两种参数

重定向redirect:指定路径重定向到另一个路径

从一个响应式对象身上直接解构赋值,被赋值的变量会失去响应式,除非结构赋值时加上toRefs()


http://www.niftyadmin.cn/n/5865334.html

相关文章

3dtiles平移旋转工具制作

3dtiles平移旋转缩放原理及可视化工具实现 背景 平时工作中,通过cesium平台来搭建一个演示场景是很常见的事情。一般来说,演示场景不需要多完善的功能,但是需要一批三维模型搭建,如厂房、电力设备、园区等。在实际搭建过程中&…

一文讲解Redis为什么读写性能高以及I/O复用相关知识点

Redis为什么读写性能高呢? Redis 的速度⾮常快,单机的 Redis 就可以⽀撑每秒十几万的并发,性能是 MySQL 的⼏⼗倍。原因主要有⼏点: ①、基于内存的数据存储,Redis 将数据存储在内存当中,使得数据的读写操…

协方差(Covariance)与得分函数:从Fisher信息矩阵看统计关联

协方差与得分函数:从Fisher信息矩阵看统计关联 协方差(Covariance)是统计学中一个基础但强大的概念,它描述了两个随机变量之间的关系。在Fisher信息矩阵中,协方差以一种特别的形式出现:得分函数的协方差。…

vue js-web-screen-shot浏览器截取其他非全屏窗口界面

网页截屏 js-web-screen-shot 截取其他窗口 显示不全问题 npm 安装 js-web-screen-shot npm install js-web-screen-shot --savejs-web-screen-shot默认截屏是从左下角开始的,修改成左上角开始,然后编辑cropBoxInfo参数宽高进行截取,目前截…

计算机网络与通讯知识总结

计算机网络与通讯知识总结 基础知识总结 1)FTP:文件传输 SSH:远程登录 HTTP:网址访问 2)‌交换机 定义‌:一种基于MAC地址实现局域网(LAN)内数据高速转发的网络设备,可为接入设备提供独享通信通道‌。 -‌ 核心功能‌: 1.数据链路层(OSI第二层)工作,通过MAC地址…

Spring高级篇-Spring IOC容器 Aware 接口

一、概述 在Spring框架中,IOC(Inversion of Control)容器负责管理应用程序中的对象(即Bean)的生命周期和依赖关系。Spring提供了一系列的Aware接口,允许Bean在初始化时获取Spring容器中的某些资源或信息。…

Starlink卫星动力学系统仿真建模第十讲-基于SMC和四元数的卫星姿态控制示例及Python实现

基于四元数与滑模控制的卫星姿态控制 一、基本原理 1. 四元数姿态表示 四元数运动学方程: 3. 滑模控制设计 二、代码实现(Python) 1. 四元数运算工具 import numpy as npdef quat_mult(q1, q2):"""四元数乘法""…

实现实时数据仓库开源项目

根据你的需求,以下是一些可以实现类似 ClickHouse 的实时数仓功能的项目,这些项目提供了高性能的数据处理和分析能力,适合实时数据仓库的场景: 1. Apache Doris Apache Doris 是一个开源的实时数据仓库,支持高吞吐量…