Vue3:编程式路由导航

一、情景说明

Vue3的用法略有区别

Vue2的用法:https://blog.csdn.net/Brave_heart4pzj/article/details/136326608

二、案例

简单理解:RouterLinkto怎么写,router.replacerouter.push中就怎么配置。

<!-- 跳转的按钮 -->
<button @click="showNewsDetail(news)">查看新闻</button><script setup lang="ts" name="News">import {reactive} from 'vue'import {RouterView,RouterLink,useRouter} from 'vue-router'const newsList = reactive([{id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},{id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},{id:'asfdtrfay03',title:'震惊,万万没想到',content:'明天是周一'},{id:'asfdtrfay04',title:'好消息!好消息!',content:'快过年了'}])const router = useRouter()interface NewsInter {id:string,title:string,content:string}//replace方式跳转function showNewsDetail(news:NewsInter){router.replace({name:'xiang',query:{id:news.id,title:news.title,content:news.content}})}//push方式跳转function showNewsDetail(news:NewsInter){router.push({name:'xiang',query:{id:news.id,title:news.title,content:news.content}})}
</script>

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

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

相关文章

IM系统设计之websocket消息转发

Websocket消息转发 项目地址&#xff1a;gitgithub.com:muyixiaoxi/Link.git 上周面试被面试官问到&#xff1a;“在分布式IM系统中&#xff0c;如何实现多个websocket集群之间的通信”。 我在思考了良久后回答&#xff1a;“不会”。 随着我的回答&#xff0c;我和面试官的…

企业产品网络安全建设实录日报规划

为什么要做这个系列&#xff1f; 因为太忙了&#xff0c;忙工作&#xff0c;忙家庭。很难再像之前一样能做到电脑前码一个小时的字&#xff0c;写半个小时的博客。 但是现在的经验增长快速&#xff0c;有很多值得分享的点 想想这平行世界里的我&#xff0c;实际上并不是每一个人…

Spring Data访问Elasticsearch----创建存储库实例

Spring Data访问Elasticsearch----创建存储库实例 一、Java配置二、XML配置三、使用过滤器四、独立使用 本文介绍如何为已定义的存储库接口创建实例和bean定义。 一、Java配置 在Java配置类上使用特定于存储的EnableElasticsearchRepositories注解来定义用于存储库激活的配置。…

MySQL 中的事务和存储引擎

目录 事务的 ACID 特性 MySQL 的四种隔离机制和问题 MySQL 的四种隔离机制&#xff1a; MySQL 的存储引擎 InnoDB 存储引擎 MyISAM 存储引擎 Memory 存储引擎 通过 ALTER TABLE 语句更改存储引擎 在创建表时指定存储引擎 通过修改配置文件设置默认存储引擎 在数据库系…

element el-dialog里再调用其他组件,查找不到组件的方法

需求描述&#xff1a;点击编辑按钮&#xff0c;跳出编辑弹窗&#xff0c;回显图片组件里面的图片问题&#xff1a;element el-dialog里再调用组件&#xff0c;打开该弹窗的瞬间找不到弹窗里调用子组件的方法原因&#xff1a;弹窗显示时&#xff0c;调用的子组件还没渲染出来所以…

【机器学习入门 】支持向量机

系列文章目录 第1章 专家系统 第2章 决策树 第3章 神经元和感知机 识别手写数字——感知机 第4章 线性回归 第5章 逻辑斯蒂回归和分类 前言 支持向量机(Support Vector Machine) 于1995年发表&#xff0c;由于其优越的性能和广泛的适用性&#xff0c;成为机器学习的主流技术&…

阿里云有免费服务器吗?有的,附送免费服务器申请流程

阿里云服务器免费试用申请链接入口&#xff1a;aliyunfuwuqi.com/go/free 阿里云个人用户和企业用户均可申请免费试用&#xff0c;最高可以免费使用3个月&#xff0c;阿里云服务器网分享阿里云服务器免费试用申请入口链接及云服务器配置&#xff1a; 阿里云免费服务器领取 阿里…

Python:继承

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; Python中的继承是面向对象编程&#xff08;OOP&#xff09;的一个基本特性&#xff0c;它允许一个类&#xff08;称为子类&#xff09;继承另一个…

string c++

#include<iostream> using namespace std; int main() { string a"wddw"; string b"wdwdwdwdwd"; string c b a; cout << c << endl; cout << c.length() << endl; string c_sub c.substr(2,2);//从第二个开…

day10_面向对象之封装丶构造器

封装概述 现实生活中&#xff0c;每一个个体与个体之间是有边界的&#xff0c;每一个团体与团体之间是有边界的&#xff0c;而同一个个体、团体内部的信息是互通的&#xff0c;只是对外有所隐瞒。 面向对象编程语言是对客观世界的模拟&#xff0c;客观世界里每一个事物的内部…

【MySQL】巧解客户连续递增交易

力扣题 1、题目地址 2701. 连续递增交易 2、模拟表 表&#xff1a;Transactions 字段名类型transaction_idintcustomer_idinttransaction_datedateamountint transaction_id 是该表的主键。每行包含有关交易的信息&#xff0c;包括唯一的 (customer_id, transaction_date…

总结: HQL语句

总结: HQL语句 Part1 数据库的操作Part2 数据表的操作1. 创建普通表2. 内外部表3. 内外部表转换 Part1 数据库的操作 查看数据库: show databases; 创建数据库: create database if not exists 数据库名 使用数据库: use 数据库名; 查看数据库详细信息: desc database 数据库名…

Echarts 利用多X轴实现未来15天天气预报

Echarts 利用多X轴实现未来15天天气预报 UI 设计图 Echarts 实现效果 代码实现 代码分解 echarts 图表上下均显示数据 通过设置 grid.top 和 grid.bottom 设置白天和夜间天气展示区域 grid: {top: 36%,bottom: 36%,left: 5%,right: 5%}, 天气图标的设置 由于 axisLabel 的…

【Linux】一文了解【进程优先级相关知识点】&【PRI / NI值】背后的修正原理(13)

前言 大家好吖&#xff0c;欢迎来到 YY 滴Linux系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过Linux的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《…

算法 之 排序算法

&#x1f389;欢迎大家观看AUGENSTERN_dc的文章(o゜▽゜)o☆✨✨ &#x1f389;感谢各位读者在百忙之中抽出时间来垂阅我的文章&#xff0c;我会尽我所能向的大家分享我的知识和经验&#x1f4d6; &#x1f389;希望我们在一篇篇的文章中能够共同进步&#xff01;&#xff01;&…

实验7-2-10 简易连连看(PTA)

题目&#xff1a; 本题要求实现一个简易连连看游戏模拟程序。 给定一个2N2N的方阵网格游戏盘面&#xff0c;每个格子中放置一些符号。这些符号一定是成对出现的&#xff0c;同一个符号可能不止一对。程序读入玩家给出的一对位置(x1​,y1​)、(x2​,y2​)&#xff0c;判断这两…

leetcode(Hot100)——数组篇

1、两数之和 本题使用哈希法&#xff0c;用一个哈希Map保存数组的值以及对应下标&#xff0c;代码如下&#xff1a; class Solution {public int[] twoSum(int[] nums, int target) {HashMap<Integer,Integer> map new HashMap<>();for(int i0; i<nums.length…

【网络基础】网络层基本协议介绍

目录 一、IP数据包 1.1 网络层的功能 1.2 IP数据包格式 二、ICMP协议介绍 2.1 作用 2.2 常用命令 2.2.1 Ping命令 2.2.2 tracert命令 2.3 广播域 三、ARP协议介绍 3.1 作用 3.2 原理 一、IP数据包 1.1 网络层的功能 定义了基于IP协议的逻辑地址&#xff0c;就是I…

数据结构应用——哈夫曼树

哈夫曼树 哈夫曼树的相关概念构造哈夫曼树基础算法 哈夫曼编码 哈夫曼树的相关概念 结点的权&#xff1a;有某种现实含义的数值。结点的带权路径长度&#xff1a;从树的根结点到该结点的路径长度&#xff08;经过的边数&#xff09;与该结点上权值的乘积。树的带权路径长度&am…

CAPL (Communication Access Programming Language)

CAPL (Communication Access Programming Language) 是一种专门用于模拟和测试汽车网络的脚本语言&#xff0c;特别是CAN (Controller Area Network) 和LIN (Local Interconnect Network) 网络。虽然CAPL主要用于模拟网络行为和测试网络节点&#xff0c;但它也支持一些基本的编…