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

VUE之路由Props、replace、编程式路由导航、重定向

news 来源：原创 2025/6/8 12:05:27

1、路由_props的配置

2、路由_replaces属性

3、编程式路由导航

4、路由重定向

1、路由_props的配置

1）第一种写法，将路由收到的所有params参数作为props传给路由组件

只能适用于params参数

// 创建一个路由器，并暴露出去// 第一步：引入createRouter
import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router'
// 引入一个个可能呈现组件
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
import Detail from '@/pages/Detail.vue'
// 第二步：创建路由器
const router = createRouter({history:createWebHashHistory(), //路由器的工作模式routes:[  //一个个路由规则{path:'/home',component: Home},{path:'/news',component: News,children:[{name: 'xiangqi',path:'detail/:id/:title/:content?', //用于params参数占位,加?号可传可不传// path:'detail',component:Detail,//第一种写法：将路由收到的所有params参数作为props传给路由组件props: true]},{path:'/about',component: About},]
})export default router

component:Detail,
//第一种写法：将路由收到的所有params参数作为props传给路由组件
props: true

相当于：<Detail id=?? title = ?? content=??/>

<template><ul class="news-list"><li>编号:{{id}}</li><li>编号:{{title}}</li><li>编号:{{content}}</li></ul>
</template><script lang="ts" setup name="Detail">defineProps(['id','title','content'])
</script>

<template><div class="news"><!--导航区--><ul><li v-for="news in newList" :key="news.id"><RouterLink :to="{name:'xiangqi',params: {  //params不能传对象和数组id:news.id,title:news.title,content:news.content}}">{{news.title}}</RouterLink>         </li></ul><!--展示区--><div class="news-content"><RouterView/></div></div>
</template><script setup lang="ts" name="News">
import { reactive } from 'vue';
import { RouterView,RouterLink } from 'vue-router';
const newList = reactive([{id:'dasfadadadad01',title:'很好的抗癌食物',content:'西蓝花'},{id:'dasfadadadad02',title:'如何一夜暴富',content:'学IT'},{id:'dasfadadadad03',title:'震惊万万没想到',content:'明天周一'},{id:'dasfadadadad04',title:'好消息',content:'快过年了'},])</script>

2）第二种写法，函数写法，可以自己决定将什么作为props给路由组件

适用于query参数类型的传递

 {path:'/news',component: News,children:[{name: 'xiangqi',path:'detail/:id/:title/:content?', //用于params参数占位,加?号可传可不传// path:'detail',component:Detail,//第二种写法：可以自己决定将什么作为props给路由组件props(route){console.log('@@@@',route)return route.params}}]}

其中：console.log打印的route参数结构如下：

3）第三种写法，对象写法，只能写死，不适用

 {path:'/news',component: News,children:[{name: 'xiangqi',path:'detail/:id/:title/:content?', //用于params参数占位,加?号可传可不传// path:'detail',component:Detail,props:{a: 100,b: 200,c: 300}}]},

2、路由_replaces属性

1）作用：控制路由跳转时操作浏览器历史记录的模式。

2）浏览器的历史记录有两种写入方式：分别为push和replace：

push 是追加历史记录（默认值）
replace是替换当前记录

3）开启replace模式：

<RouterLink replace .....>News</RouterLink>

    <!--导航区--><div class="navigate"><RouterLink replace  to="/home" active-class="active">首页</RouterLink><RouterLink replace to="/news" active-class="active">新闻</RouterLink><RouterLink replace :to="{path:'/about'}" active-class="active">关于</RouterLink></div>

3、编程式路由导航

脱离<RouterLink>实现跳转

<script setup lang="ts" name = "Home">
import {onMounted} from 'vue'
import { useRouter } from 'vue-router';const router = useRouter()onMounted(()=>{setTimeout(()=>{// 在此次编写一段代码，让路由实现跳转router.push('/news')},3000)
})</script>

<template><div class="news"><!--导航区--><ul><li v-for="news in newList" :key="news.id"><button @click="showNewsDetail(news)">查看新闻</button><RouterLink :to="{name:'xiangqi',params: {  //params不能传对象和数组id:news.id,title:news.title,content:news.content}}">{{news.title}}</RouterLink>         </li></ul><!--展示区--><div class="news-content"><RouterView/></div></div>
</template><script setup lang="ts" name="News">
import { reactive } from 'vue';
import { RouterView,RouterLink,useRouter} from 'vue-router';
const newList = reactive([{id:'dasfadadadad01',title:'很好的抗癌食物',content:'西蓝花'},{id:'dasfadadadad02',title:'如何一夜暴富',content:'学IT'},{id:'dasfadadadad03',title:'震惊万万没想到',content:'明天周一'},{id:'dasfadadadad04',title:'好消息',content:'快过年了'},])const router = useRouter()interface NewsInter {id:string,title:string,content:string
}function showNewsDetail(news:NewsInter){router.push({name:'xiangqi',params: {  //params不能传对象和数组id:news.id,title:news.title,content:news.content}
})
}
</script>

编程式路由导航应用场景：

1、满足某些条件才跳转

2、鼠标划过就跳转

4、路由重定向

const router = createRouter({history:createWebHashHistory(), //路由器的工作模式routes:[  //一个个路由规则{path:'/home',component: Home},{path:'/about',component: About},{path: '/',redirect: '/home'}]
})export default router

VUE之路由Props、replace、编程式路由导航、重定向

目录 1、路由_props的配置 2、路由_replaces属性 3、编程式路由导航 4、路由重定向 1、路由_props的配置 1）第一种写法，将路由收到的所有params参数作为props传给路由组件只能适用于params参数 // 创建一个路由器，并暴露出去// 第一步…...

编程日记 2025/5/30 17:08:57

RabbitMQ的消息可靠性保证

文章目录 1.环境搭建1.common-rabbitmq-starter 配置防止消费者抢消息（基础配置）2.common-rabbitmq-starter-demo下创建一个生产者一个消费者 2.生产者可靠性1.开启消息超时重试机制2.生产者开启ConfirmCallback消息确认机制1.application.yml2.TestConf…...

编程日记 2025/5/31 1:03:51

MySQL 很重要的库 - 信息字典

在做owasp SQL 注入的时候，有个很重要的库，那就是信息库: 这个库就是: information_schema; （准确的说，数据字典) mysql> show databases; -------------------- | Database | -------------------- | informa…...

编程日记 2025/5/29 0:16:55

使用C#对指定的MYSQL数据库进行备份以及常见问题

最近在开发过程中，需要做个MYSQL数据库的备份，大致总结了一下代码，以及常见的坑 string bakName "database" DateTime.Now.ToString("yyyyMMddHHmmss") ".sql";//备份后的数据库文件名var bakupFilePath &q…...

编程日记 2025/6/3 10:06:40

Appium(四)

一、app页面元素定位 1、通过id定位元素: resrouce-id2、通过ClassName定位：classname3、通过AccessibilityId定位：content-desc4、通过AndroidUiAutomator定位5、通过xpath定位xpath、id、class、accessibility id、android uiautomatorUI AutomatorUI自…...

编程日记 2025/6/2 1:40:07

jvm_threads_live_threads 和 jvm_threads_states_threads 这两个指标之间存在一定的关系，但它们关注的维度不同

jvm_threads_live_threads 和 jvm_threads_states_threads 这两个指标之间存在一定的关系，但它们关注的维度不同。以下是它们的详细关系和区别： 1. jvm_threads_live_threads 含义： 表示当前 JVM 中存活的线程总数（即当前活动的线…...

编程日记 2025/6/2 3:02:30

docker 部署.netcore应用优势在什么地方？

目录 1. 环境一致性 2. 简化依赖管理 3. 快速部署与扩展 4. 资源利用率高 5. 版本控制与回滚 6. 安全性 7. 生态系统支持 8. 微服务架构支持 9. 降低成本 10. 开发体验提升总结使用 Docker 部署 .NET Core 应用有许多优势，特别是在开发、测试和生产环境…...

编程日记 2025/6/1 13:59:53

SpringBoot开发（一）应用jar包

1. SpringBoot开发 1.1. 目标及简介 1.1.1. 目标 （1）掌握微服务SpringBoot在实际项目开发中常用的核心技术栈及其在典型业务场景下的应用实战。 （2）掌握SpringBoot SpringMVC Mybatis在Java Web应用开发过程的技术干货以及…...

编程日记 2025/6/2 7:11:39

【Linux】深刻理解动静态库

1.什么是库库是写好的现有的，成熟的，可以复⽤的代码。现实中每个程序都要依赖很多基础的底层库，不可能每个⼈的代码都从零开始，因此库的存在意义⾮同寻常。本质上来说库是⼀种可执⾏代码的⼆进制形式，可以被操作系统载…...

编程日记 2025/6/3 17:54:05

【spring 事务】事务的基本使用，事务隔离级别、事务传播机制

在Spring框架中，声明式事务管理是一种通过注解或配置文件自动管理事务的方式，而不需要手动编写事务管理代码。Transactional是Spring提供的一个注解，用于声明式事务管理，它使得事务的管理变得简单而清晰。主要特性自动事务管理…...

编程日记 2025/5/31 5:46:37

arkime 和elasticsearch安装方法二

这次试一下新的办法先下载centOS 7 然后改成阿里云镜像输入命令备份官方yum源配置文件 cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 下载阿里云源配置，覆盖原文件 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirr…...

编程日记 2025/6/4 9:21:02

GitCode 助力 AutoTable：共创 MyBatis 生态的自动表格管理新篇章

项目仓库https://gitcode.com/dromara/auto-table 解放双手，专注业务：MyBatis 生态的“自动表格”创新 AutoTable 是一款致力于为 MyBatis 生态赋予“自动表格”功能的创新插件。其核心理念是通过 Java 实体类自动生成和维护数据库的表结构&#xff0c…...

编程日记 2025/6/2 7:11:10

日历热力图，月度数据可视化图表（日活跃图、格子图）vue组件

日历热力图，月度数据可视化图表，vue组件先看效果👇 在线体验https://www.guetzjb.cn/calanderViewGraph/ 日历图简单划分为近一年时间，开始时间是上一年的今天，例如2024/01/01 —— 2025/01/01，跨度刚…...

编程日记 2025/6/3 6:48:35

ue5 制作，播放，停止动画蒙太奇

右键，动画蒙太奇新建插槽把默认插槽选择为，自己新建的插槽然后拖一个动画进去 input换成玩家0 就可以接收键盘事件 pawn 自动控制玩家换成玩家0 找到动画蓝图把它化成我们那边蒙太奇里面的槽第三步：第三人称角色蓝图按下F…...

编程日记 2025/5/20 3:59:53

Genetic Prompt Search via Exploiting Language Model Probabilities

题目利用语言模型概率的遗传提示搜索论文地址：https://www.ijcai.org/proceedings/2023/0588.pdf 项目地址：https://github.com/zjjhit/gap3 摘要针对大规模预训练语言模型(PLMs)的即时调优已经显示出显著的潜力，尤其是在诸如fewshot学习…...

编程日记 2025/6/3 5:16:01

mysql之表的外键约束

MySQL表的外键约束详细介绍及代码示例外键约束是数据库中用于维护数据完整性和一致性的重要机制。它确保一个表中的数据与另一个表中的数据相关联，防止无效的数据引用。本文将详细介绍了外键约束的各个方面，并通过具体的代码示例进行演示。 1. 外键约束…...

编程日记 2025/6/4 17:48:50

linux环境变量配置文件区别 /etc/profile和~/.bash_profile

在 Linux 系统中，环境变量可以定义用户会话的行为，而这些变量的加载和配置通常涉及多个文件，如 ~/.bash_profile 和 /etc/profile。这些文件的作用和加载时机各有不同。以下是对它们的详细区别和用途的说明： 文章目录 1. 环境变量…...

编程日记 2025/6/1 10:34:12

C++----STL（vector）

vector的介绍 vector的文档介绍：cplusplus.com/reference/vector/vector/ 1.基本概念简单来说，vector是表示可以改变大小的数组的顺序容器。使用连续的存储位置来存储元素，因此可以通过常规指针的偏移量来高效访问。 2.内部机制 vector…...

编程日记 2025/6/3 16:31:59

springboot项目适配电科金仓数据库

又接到了信创适配任务，话不多说，直接开始干货首先安装一下电科金仓的数据库，直接官网下，对应的授权也下90天的专业版，客户肯定是整个采购，365天的开发版本连接数有限制 KES相关下载地址：电科金仓-成为世界卓越的数据库产品与服务提供商安装就不做赘述了启动数据库…...

编程日记 2025/5/31 19:53:50

C# 动态创建Label和ComboBox控件并修改Text获取Text

背景：在做项目的时候可能需要根据一定数量创建某些控件并修改其属性，本文以控件label、ConboBox控件进行动态创建。程序运行前后的的Form动态图代码如下： using System; using System.Collections.Generic; using System.ComponentModel; …...

编程日记 2025/5/28 21:42:29

HP 笔记本重新安装 Windows 11 无法启动

相信你搜到这篇文章的时候， 你已经看过了网上各种关于如何在 HP 笔记本电脑上安装 Windows 11 的文章。你遇到的问题肯定不是网上那些文章讲的那么简单的问题。你遇到的一定不是你不懂如何安装 Windows，不懂如何对硬盘分区等等小白问题。问题描述问…...

编程日记 2025/6/4 8:02:11

BUUCTF_Web( XSS COURSE 1)xss

XSS即跨站脚本攻击（Cross-Site Scripting），是一种常见的网络安全漏洞. 定义 XSS攻击指攻击者在目标网站中注入恶意脚本，当用户访问该网站时，浏览器会执行这些恶意脚本，从而导致用户信息泄露、被控制等安全问…...

编程日记 2025/6/3 19:53:03

STM32补充——IAP

0 前置知识： FLASH相关内容：前往STM32补充——FLASH STM32三种烧录方式（看看就行）： 1.ISP：In System Programming（在系统编程） 执行芯片厂商的 Bootloader 程序进入 ISP 模式&…...

编程日记 2025/6/1 2:52:42

APP加固的那些事

APP加固是保护APP代码逻辑的重要手段，通过隐藏、混淆、加密等操作提高软件的逆向成本，降低被破解的几率，保障开发者和用户利益。本文将介绍APP加固常见失败原因及解决方法，以及处理安装出现问题的情况和资源文件加固策略选择。引…...

编程日记 2025/6/4 17:48:07

数据分析基础定义

一、大数据的定义数据分析是基于商业等目的，有目的的进行收集、整理、加工和分析数据，提炼有价值信息的过程。大数据分析即针对海量的、多样化的数据集合的分析大数据分析是一种利用大规模数据集进行分析和挖掘知识的方法。随着互联网、社交媒体、移动…...

编程日记 2025/5/30 19:14:09

PyTorch广告点击率预测（CTR）利用深度学习提升广告效果

目录广告点击率预测问题数据集结构广告点击率预测模型的构建1. 数据集准备2. 构建数据加载器3. 构建深度学习模型4. 训练与评估总结广告点击率预测（CTR，Click-Through Rate Prediction）是在线广告领域中的重要任务，它帮助广告平…...

编程日记 2025/6/3 21:41:40

嵌入式入门(二)-STM32CubeMX项目开发

使用STM32CubeMX创建项目本文使用STM32CubeMX模拟器创建一个嵌入式项目的详细流程。 New Project 根据型号搜索搜索型号： STM32F103C8T6 启动项目选择STM32F103C8T6后点击 Start Project 配置时钟切换到 Clock Configuration 修改HCLK -->72MHZ 修改Input fr…...

编程日记 2025/5/31 13:45:27

MATLAB绘图时线段颜色、数据点形状与颜色等设置，介绍

MATLAB在绘图时，设置线段颜色和数据点的形状与颜色是提高图形可读性与美观性的重要手段。本文将详细介绍如何在 MATLAB 中设置这些属性。文章目录线段颜色设置单字母颜色表示法RGB 值表示法数据点的形状与颜色设置设置数据点颜色和形状示例代码运行结果小结线段…...

编程日记 2025/6/4 4:20:33

Java菜鸟养成计划（java基础）--java运算符

java中的运算符 1、java中的运算符1.1 、、-、 * 、/ 、 %1.2 、、-、 *、/、%1.3 、、--【自增\自减运算符】1.4、>、 <、 > 、< 、、! 、! 1.5、&&、||、|、&1.6、&、|、~、^1.7、>> 、 <<、>>>位运算1.8、?:三目运算符…...

编程日记 2025/5/29 17:42:07

学习笔记——动态规划

递推 1.递推和动态规划有什么关系？ 递推问题包括动态规划，动态规划一定是递推，递推不一定是动态规划。动态规划是一种决策性的问题，是在状态中做最优决策的一种特殊递推算法，通常的问法包括求最大最小值等&#xff…...

编程日记 2025/6/1 19:48:38

蓝桥杯备考：红黑树与map和set

搜索二叉树我们三种树只了解原理，不写代码，因为我们竞赛不做要求，只是为了使用set和map做铺垫原理记不住，没关系，我们只要会各种操作的时间复杂度二叉搜索树的定义 1若左子树非空，左子树所有结点的权…...

编程日记 2025/6/2 20:32:06

第二届生成式人工智能与信息安全国际学术会议（GAIIS 2025）

在线投稿： 学术会议-学术交流征稿-学术会议在线-艾思科蓝【征文主题】（包括但不限于） 深度学习自然语言处理算法应用计算机视觉视觉识别模式识别强化学习生成对抗网络生成建模技术语言预训练视觉预训练联合预训练…...

编程日记 2025/5/29 13:30:30

后端面试题分享第一弹(状态码、进程线程、TCPUDP)

后端面试题分享第一弹 1. 如何查看状态码，状态码含义在Web开发和调试过程中，HTTP状态码是了解请求处理情况的重要工具。查看状态码的步骤打开开发者工具： 在大多数浏览器中，您可以通过按下 F12 键或右键单击页面并选择“检查…...

编程日记 2025/6/4 9:47:37

Python 常用运维模块之OS模块篇

Python 常用运维模块之OS模块篇 OS 模块获取当前工作目录更改当前工作目录返回当前目录路径返回上一级目录路径递归生成目录路径删除目录创建目录删除目录列出特定目录下文件和子目录删除某个特定文件重命名某个文件获取某个文件/目录的信息输出目录路径分隔符输出文件行终止符…...

编程日记 2025/6/1 19:47:56

前沿技术趋势洞察：2024年技术的崭新篇章与未来走向！

引言时光飞逝，2024年已经来临，回顾过去一年，科技的迅猛进步简直让人目不暇接。在人工智能（AI）越来越强大的今天，我们不再停留在幻想阶段，量子计算的雏形开始展示它的无穷潜力，Web …...

编程日记 2025/6/3 16:21:24

HTML语言的数据结构

HTML语言的数据结构引言 HTML（超文本标记语言）是构建网页的标准语言。尽管HTML本身不是一种编程语言，它为我们提供了一种结构化的信息表示方法，使得网页内容能够有序地展现给用户。HTML的核心在于其标记（标签&#…...

编程日记 2025/6/3 13:13:23

怎么创建一个能在线测试php的html5网页？

代码示例： 一、搭建服务器环境首先，你需要在服务器上搭建 PHP 运行环境。如果你使用的是 Linux 服务器，可以使用 Apache 或 Nginx 作为 Web 服务器，并安装 PHP 解释器。对于 Windows 服务器，可以使用 WAMP&#xff08…...

编程日记 2025/6/2 2:39:03

docker安装elk6.7.1-搜集nginx-json日志

docker安装elk6.7.1-搜集nginx-json日志如果对运维课程感兴趣，可以在b站上、A站或csdn上搜索我的账号： 运维实战课程，可以关注我，学习更多免费的运维实战技术视频 0.规划 192.168.171.130 nginxfilebeat 192.168.171.131 …...

编程日记 2025/6/1 18:19:25

常见的社交媒体平台有哪些？

社交媒体平台有哪些？在跨境电商和全球营销的过程中，海外社交媒体平台是提高品牌曝光率的重要工具。为了有效管理多个平台的账户，并防止账户之间的关联问题，OKBrow指纹指纹浏览器凭借其强大的多账户管理、防关联技术和隐私保护功能…...

编程日记 2025/6/3 4:13:59

nslookup在内网渗透的使用

1. 什么是 nslookup？ nslookup（Name Server Lookup）是一个用于查询 DNS（域名系统）记录的命令行工具。通过该工具，用户可以查询域名的解析结果，例如获取某个域名对应的 IP 地址或查找域名的相关记…...

编程日记 2025/6/2 17:58:38

Linux：修改用户名

Linux：修改用户名 0. 注意事项1.创建并切到临时用户tempuser2.更改用户名3.删除临时用户tempuser 更多内容：XiaoJ的知识星球在Ubuntu系统中，更改用户名。 0. 注意事项备份重要数据：在更改用户名之前，建议备份重要数…...

编程日记 2025/5/30 23:51:26

IP协议特性

在网络层中，最重要的协议就是IP协议，IP协议也有两个特性，即地址管理和路由选择。 1、地址管理由于IPv4地址为4个字节，所以最多可以支持42亿个地址，但在现在，42亿明显不够用了。这就衍生出下面几个机制。…...

编程日记 2025/6/3 22:57:35

开发环境搭建-3：配置 nodejs 开发环境 (fnm+ node + pnpm)

在 WSL 环境中配置：WSL2 (2.3.26.0) Oracle Linux 8.7 官方镜像 node 官网：https://nodejs.org/zh-cn/download 点击【下载】，选择想要的 node 版本、操作系统、node 版本管理器、npm包管理器根据下面代码提示依次执行对应代码即可基本概…...

编程日记 2025/6/1 7:13:30

14_音乐播放服务_字典缓存避免重复加载

首先在游戏根入口下创建空节点 F2重命名为BGAudio 作为播放背景音乐的对象在BGAudio对象上挂载组件 AudioSource 关掉PlayOnAwake 因为我们需要通过代码来控制音效音量大小设置为0.5 Ctrl d 再复制一份背景播放对象BGAudio 重命名为UIAudio 作为UI窗口操作的播放对象创建…...

编程日记 2025/6/1 10:42:13

1、代码中存入和读取需要使用自定义转换器 Slf4j public class ArrayTypeHandler extends BaseTypeHandler<List<String>> {Overridepublic void setNonNullParameter(PreparedStatement ps, int i, List<String> parameter, JdbcType jdbcType)throws SQL…...

编程日记 2025/5/30 5:01:46

新年好（Dijkstra+dfs/全排列）

1135. 新年好 - AcWing题库思路： 1.先预处理出1,a,b,c,d,e到其他点的单源最短路，也就是进行6次Dijkstra 2.计算以1为起点的这6个数的全排列，哪种排列方式所得距离最小，也可以使用dfs 1.Dijkstradfs #define int long longusing …...

编程日记 2025/5/31 6:34:36

vscode导入模块不显示类型注解

目录结构： utils.py： import random def select_Jrandom(i:int, m:int) -> int:"""随机选择一个不等于 i 的整数"""j iwhile j i:j int(random.uniform(0, m))return jdef clip_alpha(alpha_j:float, H:float, L:f…...

编程日记 2025/6/3 6:36:24