Vue2/Vue3中编程式路由导航实践总结

【1】Vue2编程式路由导航

① router.push

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

router.push(location, onComplete?, onAbort?)

注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...)

声明式编程式
<router-link :to="...">router.push(...)

该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:

// 字符串
router.push('home')// 对象
router.push({ path: 'home' })// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:

const userId = '123'
// params与name组合使用
router.push({ name: 'user', params: { userId }}) // -> /user/123
//拼接path
router.push({ path: `/user/${userId}` }) // -> /user/123// 这里的 params 不生效  params不可以与path组合使用
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则也适用于 router-link 组件的 to 属性。

在 2.2.0+,可选的在 router.pushrouter.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。在 3.1.0+,可以省略第二个和第三个参数,此时如果支持 Promise,router.push 或 router.replace 将返回一个 Promise

注意: 如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。


② router.replace

router.replace(location, onComplete?, onAbort?)

router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

声明式编程式
<router-link :to="..." replace>router.replace(...)

使用实例如下:

<li v-for="m in messages" :key="m.id"><router-link :to="`/home/message/detail/${m.id}`">{{m.title}}</router-link><button @click="pushShow(m.id)">push查看</button><button @click="replaceShow(m.id)">replace查看</button>
</li>
methods: {pushShow (id) {this.$router.push(`/home/message/detail/${id}`)},replaceShow(id) {this.$router.replace(`/home/message/detail/${id}`)}}

总结如下:

1) this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
3) this.$router.back(): 请求(返回)上一个记录路由
4) this.$router.go(-1): 请求(返回)上一个记录路由
5) this.$router.go(1): 请求下一个记录路由

③ 替换路由参数并刷新路由

this.$router.replace({name: 'concertDetail',query: {concertId: id}
})
/**  兼容性好*/
window.location.reload()

【2】Vue3编程式路由导航

路由组件的两个重要的属性:$route$router变成了两个hooks 。route表示当前路由,router表示路由器实例。

import {useRoute,useRouter} from 'vue-router'const route = useRoute()
const router = useRouter()
//当前路由信息
console.log(route.query)
console.log(route.parmas)
//路由器实例
console.log(router.push)
console.log(router.replace)

① router.replace

<template><div class="news"><!-- 导航区 --><ul><li v-for="news in newsList" :key="news.id"><button @click="showNewsDetail(news)">查看新闻</button><RouterLink :to="{name:'xiang',query:{id:news.id,title:news.title,content:news.content}}">{{news.title}}</RouterLink></li></ul><!-- 展示区 --><div class="news-content"><RouterView></RouterView></div></div>
</template><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}function showNewsDetail(news:NewsInter){router.replace({name:'xiang',query:{id:news.id,title:news.title,content:news.content}})}</script>

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

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

相关文章

信息安全工程师(1)计算机网络分类

一、按分布范围分类 广域网&#xff08;WAN&#xff09;&#xff1a; 定义&#xff1a;广域网的任务是提供长距离通信&#xff0c;运送主机所发送的数据。其覆盖范围通常是直径为几十千米到几千千米的区域&#xff0c;因此也被称为远程网。特点&#xff1a;连接广域网的各个结点…

智能语音技术在人机交互中的应用与发展

摘要&#xff1a;本文主要探讨智能自动语音识别技术与语音合成技术在构建智能口语系统方面的作用。这两项技术实现了人机语音通信&#xff0c;建立起能听能说的智能口语系统。同时&#xff0c;引入开源 AI 智能名片小程序&#xff0c;分析其在智能语音技术应用场景下的意义与发…

leetcode 每日一题

2398.预算内最多的机器人数目 2024年9月13日 滑动窗口单调队列&#xff1a; 题目里表述的不太清楚&#xff0c;连续工作的机器人&#xff0c;就是求满足条件的最长子数组&#xff1b;这题可以说是滑动窗口最大值的进阶版本。 关于滑动窗口不要自己想当然的写&#xff0c;是有…

实现CPU压力测试工具的C语言实现

实现CPU压力测试工具的C语言实现 一、背景与需求二、伪代码设计三、C语言实现四、编译和运行五、注意事项在软件开发和系统维护中,CPU压力测试是一项重要任务,用于评估系统的稳定性和性能。本篇文章将详细介绍如何使用C语言结合伪代码实现一个简单的CPU压力测试工具。 一、…

软媒市场新趋势:自助发布与一手资源渠道商自助发稿的崛起

在当今这个信息爆炸的时代,软媒市场作为品牌传播的重要阵地,正经历着前所未有的变革。随着技术的不断进步和消费者行为的日益多样化,传统的营销方式已难以满足企业的需求。在这样的背景下,自助发布与一手资源渠道商自助发稿的模式应运而生,为企业的品牌宣传开辟了新的道路。 自…

C# 手动写入日志,过大写入新文件

老项目没有用logf4j等日志框架&#xff0c;使用的是手动写入文件的方式存储日志。当日志过大会出现写入缓慢问题。下面采用IO异步写入以及文件过大分片等方式解决问题。 private static readonly object _lock new object(); private const long MaxFileSize 10 * 1024 * 10…

旺店通ERP集成用友BIP(旺店通主供应链)

源系统成集云目标系统 用友BIP介绍 用友BIP是以数智底座以及财务、人力、供应链、营销、采购、制造、研发、项目、资产、协同等数智化服务成就的数智平台&#xff0c;同时也预置了很多跨行业通用的SaaS服务&#xff0c;在营销、采购、制造、财务、人力、协同等核心业务领域提供…

Wophp靶场漏洞挖掘

首先进入网站发现有个搜索框&#xff0c;那么我们试一下xss和SQL注入 SQL注入漏洞 发现这里页面没有给我们回显 那么我们尝试sql注入 查数据库 查表 最后查出账号密码 找到账号密码之后我们去找后台登录 进入后台后发现这里有个flag flag 接着往下翻找到一个文件上传的地方 …

linux-L3-linux 复制文件

linux 中要将文件file1.txt复制到目录dir中&#xff0c;可以使用以下命令 cp file1.txt dir/复制文件 cp /path/to/source/file /path/to/destination移动 mv /path/to/source/file /path/to/destination复制文件夹内的文件 cp -a /path/to/source/file /path/to/destinati…

Python使用闭包,减少重复,实现计算不同函数运行时间效果

实现计算不同函数运行时间&#xff0c;最先想到的方法是在不同函数运行前后分别计时&#xff0c;然后后计算2者的时间差就可以了&#xff0c;然而代码就会有大量重复的计时语句&#xff0c;使用Python函数闭包的方法就可以快速解决这个问题&#xff0c;代码实现如下&#xff0c…

2024年开学季,有哪些大学宿舍必备好物?

随着2024年开学季的到来&#xff0c;新生们即将离开熟悉的家乡&#xff0c;踏入充满未知与挑战的大学生活。对于许多学子而言&#xff0c;宿舍不仅是他们未来几年的居住之所&#xff0c;更是承载青春记忆、实现自我成长的重要空间。为了帮助大家更好地适应校园生活&#xff0c;…

JavaScript高级——变量提升和函数提升

1、变量声明提升 —— 通过 var 定义&#xff08;声明&#xff09;的变量&#xff0c;在定义语句之前就可以访问到 —— 值&#xff1a;undefined 2、函数声明提升 —— 通过 function 声明的函数&#xff0c;在之前就可以直接调用 —— 值&#xff1a;函数定义&#xff0…

【PythonCode】力扣Leetcode41~45题Python版

【PythonCode】力扣Leetcode41~45题Python版 前言 力扣Leetcode是一个集学习、刷题、竞赛等功能于一体的编程学习平台&#xff0c;很多计算机相关专业的学生、编程自学者、IT从业者在上面学习和刷题。 在Leetcode上刷题&#xff0c;可以选择各种主流的编程语言&#xff0c;如C…

关于Redis缓存一致性问题的优化和实践

目录标题 导语正文分布式场景下无法做到强一致即使是达到最终一致性也很难缓存的一致性问题缓存是如何写入的 如何感知数据库的变化最佳实践一&#xff1a;数据库变更后失效缓存最佳实践二&#xff1a;带版本写入 总结与展望阿里XKV腾讯DCache 导语 Redis缓存一致性的问题是经…

023.PL-SQL进阶—视图

课 程 推 荐我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448;入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448;虚 拟 环 境 搭 建 &#xff1a;&#x1…

SAP Fiori-Vscode 环境搭建中npm报错

文章目录 前提&#xff1a; vscode 安装好了&#xff0c;node 配置完毕&#xff0c;npm环境搭建OK新建一个Fiori 初始化初始化性项目的报错&警告Q1: npm WARN config global --global, --local are deprecated. Use --locationglobal insteadQ2: npm打包出现警告&#xff0…

代码随想录算法训练营第五十八天 | 拓扑排序精讲-软件构建

目录 软件构建 思路 拓扑排序的背景 拓扑排序的思路 模拟过程 判断有环 写代码 方法一&#xff1a; 拓扑排序 软件构建 题目链接&#xff1a;卡码网&#xff1a;117. 软件构建 文章讲解&#xff1a;代码随想录 某个大型软件项目的构建系统拥有 N 个文件&#xff0c;文…

jsp+sevlet+mysql实验室设备管理系统2.0

jspsevletmysql实验室设备管理系统2.0 一、系统介绍二、功能展示1.控制台2.申购设备3.设备列表4.设备维护5.设备类型6.报废设备7.维修记录 四、其它1.其他系统实现 一、系统介绍 系统主要功能&#xff1a; 普通用户&#xff1a;控制台、申购设备、设备列表、设备维护、设备类型…

用命令行的方式启动.netcore webapi

用命令行的方式启动.netcore web项目 进入指定的项目文件夹&#xff0c;比如我发布后的代码放在下面文件夹中 在此地址栏中输入“cmd”&#xff0c;打开命令提示符&#xff0c;进入到发布代码目录 命令行启动.netcore项目的命令为: dotnet 项目启动文件.dll --urls"ht…

会员计次卡渲染技术-—SAAS本地化及未来之窗行业应用跨平台架构

一、计次卡应用 1. 健身中心&#xff1a;会员购买一定次数的健身课程或使用健身房设施的权限。 2. 美容美发店&#xff1a;提供一定次数的理发、美容护理等服务。 3. 洗车店&#xff1a;车主购买若干次的洗车服务。 4. 儿童游乐场&#xff1a;家长为孩子购买固定次数的入场游…