Vue3-29-路由-编程式导航的基本使用

补充一个知识点

路由配置中的 name 属性 :
可以给你的 路由 指定 name属性,称之为 命名路由
这个 name 属性 在 编程式导航 传参时有重要的作用。

命名路由的写法如下 :
像指定 path 一样,直接指定一个 name 属性即可。{path:'/d',name:'dName',component:componentC}

什么是编程式导航

编程式导航 是相对于 <router-link> 标签的 路由方式来讲的。
<router-link> 的方式称之为 声明式导航
编程式导航 : 就是在 代码中,通过调用 路由实例对象的 API 的方式,实现路由的导航。
编程式导航的关键是 : 路由实例对象
路由实例对象中包含了 跳转路由的方法。
路由实例对象可以通过 useRouter() 这个API 来获取到。
下面我们来介绍一下这些方法。

编程式导航的关键方法的介绍

push() : 正常的跳转路由,会添加到浏览器的历史记录中,(用的最多的);
replace() : 取代当前的路由,跳转到目标路由,不会添加到浏览器的历史记录中;
go() : 在浏览的历史记录的堆栈中随意向前或向后跳转几个路由;(不太推荐使用)。
下面的描述中 使用 routerObj 表示路由实例对象

push() 【重点】

push() 方法可以有以下几种使用方式 : 1、直接传入目标路由字符串routerObj.push('/a')2、传入对象2.1 、只带 path 属性的对象routerObj.push({path:'/a'})2.2 、带参数路由 : 命名路由的方式 (name + params对象)routerObj.push({name:'/a',params:{p1:1001}})2.3 、带参数路由 :直接链接后缀的方式 (path + query对象)routerObj.push({path:'/a',query:{p1:2002}})【特别注意】 :  2.2 和 2.3 是固定的格式!!!如果 路由中同时存在 path 和 params,则 params 会被忽略!

replace()

替换当前位置。
相当于 在 push 方法的参数对象中添加 replace 属性,
就像下面这样 :push({path:'/a', replace : true})

go()

此方法的参数是整数,
正数 : 表示向前跳转,routerObj.go(1) : 相当于 routerObj.forward()
负数 : 表示向后跳转,routerObj.go(-1) : 相当于 routerObj.back()当参数过大或过小,没有那么多记录可以跳转的时候,默认会跳转失败。
例如 :routerObj.go(100)routerObj.go(-100)

案例代码

下面的案例代码主要展示核心的代码部分 :
路由配置、跳转逻辑代码。

案例项目目录结构 :
projectName| -- src| -- App.vue # 根组件| -- componentA.vue # 组件A| -- componentB.vue # 组件B| -- main.ts # 项目的入口逻辑文件| -- router.ts # 路由的核心配置文件| -- index.html # 项目的html 页面

push() 的案例 (重点)

本案例展示常用的 两种方式: 带参数路由 : 命名路由的方式 (name + params对象)routerObj.push({name:'/a',params:{p1:1001}})带参数路由 :直接链接后缀的方式 (path + query对象)routerObj.push({path:'/a',query:{p1:2002}})其他的形式和可以类比此方式进行操作。

router.ts 中的 路由配置


// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'// 引入两个组件
import componentA from "./componentA.vue";
import componentB from "./componentB.vue";// 声明路由跳转的路径与组件的对应关系
const routsList = [{path:'/a/:p1/:p2', // 声明 两个参数name:'aroute',component:componentA},{path:'/b',name:'broute',component:componentB},]// 创建路由的实例对象
const routerConfigObj = createRouter({history:createWebHistory('abc'), // 带一个参数,表示是路由的一个前缀routes:routsList // 指定路由的配置列表
})// 导出路由的对象
export default routerConfigObj;

App.vue 中 使用 编程式导航 : 核心操作
有两个按钮,
一个 跳转到 组件A,name + params 方式
一个跳转到 组件B,path + query 方式

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br>   <button @click="pushToA">路由到组件A</button><br><button @click="pushToB">路由到组件B</button><br><br><br><br><!-- router-view 进行目标组件的展示 --><router-view></router-view></div></template><script setup lang="ts">// 引入 provide 方法import { ref } from 'vue'// 引入路由配置实例 与 当前路由对象import { useRouter } from 'vue-router';// 声明父组件的一个变量const msg = ref('这是App根组件的msg变量')// 接收一下路由实例对象 对象const routerObj = useRouter();// 路由跳转到 A组件的处理方法const pushToA = ()=>{routerObj.push({name:'aroute',params:{p1:'java',p2:'push的第二个参数p2'}})}// 路由跳转到 B组件的处理方法const pushToB = ()=>{routerObj.push({path:'/b',query:{p3:'vue3',p4:'路由的跳转'}})}console.log('App.vue 根组件 中 的history :',window.history) </script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

componentA.vue : 组件A ,打印路由对象,查看路由跳转和参数是否传递正常

<template><div class="diva">这是组件A</div>
</template><script setup lang="ts">// 引入两个路由相关的方法import { useRouter,useRoute} from 'vue-router';// 声明 路由实例对象 和 当前路由对象const routerObj = useRouter()const currentRoute = useRoute()// 打印一下路由实例对象 和 当前路由对象console.log('A 组件 中 路由实例对象 :',routerObj)console.log('A 组件 中 当前路由对象 :',currentRoute)console.log('A 组件 中 的history :',window.history)</script><style scoped>.diva{width: 200px;height: 200px;background: red;}
</style>

componentB.vue : 组件B ,打印路由对象,查看路由跳转和参数是否传递正常

<template><div class="divb">这是组件B</div>
</template><script setup lang="ts">// 引入两个路由相关的方法import { useRouter,useRoute} from 'vue-router';// 声明 路由实例对象 和 当前路由对象const routerObj = useRouter()const currentRoute = useRoute()// 打印一下路由实例对象 和 当前路由对象console.log('B 组件 中 路由实例对象 :',routerObj)console.log('B 组件 中 当前路由对象 :',currentRoute)console.log('B 组件 中 的history :',window.history)</script><style scoped>.divb{width: 200px;height: 200px;background: green;}
</style>

效果展示

》1、初始状态
在这里插入图片描述

》2、点击跳转到 组件A

在这里插入图片描述

》3、点击跳转到 组件B

在这里插入图片描述

》 4、点击浏览器的返回 按钮,会回退到上一个地址
在这里插入图片描述

replace() 的案例

案例和上面的案例代码一致,
唯一的不同点就是 将 push 替换为replace

但是运行结果却是极大的不一致!push() 的运行结果,点击浏览器的【后退】按钮,是可以正常回退的;
replace() 的运行结果,点击浏览器的【后退】按钮,是不可以回退的;

》1、初始状态
在这里插入图片描述

》2、点击跳转组件A
在这里插入图片描述

》3、点击跳转组件B
在这里插入图片描述

》4、点击回退
在这里插入图片描述

go() 的案例

本案例只展示一下写法,就不再做具体的效果展示了。

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br>   <button @click="goBack">后退一个路由</button><br><button @click="goForward">向前一个路由</button><br><br><br><br><!-- router-view 进行目标组件的展示 --><router-view></router-view></div>
</template><script setup lang="ts">// 引入 provide 方法import { ref } from 'vue'// 引入路由配置实例 与 当前路由对象import { useRouter } from 'vue-router';// 声明父组件的一个变量const msg = ref('这是App根组件的msg变量')// 接收一下路由实例对象 和 当前路由 对象const routerObj = useRouter();// 关键 :后退一个const goBack = ()=>{routerObj.go(-1)}// 关键 :前进一个const goForward = ()=>{routerObj.go(1)}console.log('App.vue 根组件 中 的history :',window.history) </script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

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

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

相关文章

ubuntu 安装apisix -亲测可用

官方未提供在ubuntu系统中安装apisix的方式&#xff0c;似乎只能通过源码方式安装&#xff0c;但是并不推荐&#xff0c;非常容易失败&#xff0c; 具体操作方式如下&#xff1a; ubuntu和Debian其实类似的&#xff0c;可使用DEB方式安装&#xff0c;如下截图 注意&#xff1…

实用的二进制文件分割器

自己写的一个能方便分割文件的小工具 1.可以按照任意方式分割文件 (1)分割范围 (2)分割块大小 (3)分割份数 (4)可以反向分割(从文件末尾向文件头分割) 2.可以指定输出文件名规则 (1)文件名前缀 (2)文件名序号 (3)文件名后缀(扩展名) (4)文件名…

Ansible Windows批量安装软件

文章目录 1&#xff1a;Windows配置WINRM2: ansible安装3&#xff1a;操作步骤3.1 配置主机清单3.2 测试ansible执行命令3.3 测试安装7Z ansible操作通过winrm协议windows&#xff0c;经过实践精简以下方法能快速配置&#xff0c;并能通过测试 更多文档参考: 支持的windows版本…

vscode 支持c,c++编译调试方法

概述&#xff1a;tasks.jason launch.json settings.json一定要有&#xff0c;没有就别想跑。还有就是c 和c配置有区别&#xff0c;切记&#xff0c;下文有说 1.安装扩展插件。 2.安装编译器&#xff0c;gcc.我用的是x86_64-8.1.0-release-win32-seh-rt_v6-rev0.7z &#xf…

Linux之缓冲区的理解

目录 一、问题引入 二、缓冲区 1、什么是缓冲区 2、刷新策略 3、缓冲区由谁提供 4、重看问题 三、缓冲区的简单实现 一、问题引入 我们先来看看下面的代码&#xff1a;我们使用了C语言接口和系统调用接口来进行文件操作。在代码的最后&#xff0c;我们还使用fork函数创建…

万界星空低代码云MES-才是工业MES的未来

万界星空科技作为一家在云MES系统的研发、生产自动化方面拥有很多年行业经验的科技型企业&#xff0c;多年来专注于云MES系统的研发与技术支持服务&#xff0c;目前已成为国内知名的智能制造整体解决方案提供商。 近几年&#xff0c;万界星空科技发掘制造行业生产及物流难点、…

图像的颜色及Halcon颜色空间转换transfrom_rgb/trans_to_rgb/create_color_trans lut

图像的颜色及Halcon颜色空间转换 文章目录 图像的颜色及Halcon颜色空间转换一. 图像的色彩空间1. RGB颜色 2. 灰度图像3. HSV/ HSI二. Bayer 图像三. 颜色空间的转换1. trans_from_rgb算子2. trans_to_rgb算子3. create_color_trans_lut算子 图像的颜色能真实地反映人眼所见的真…

挑战Python100题(8)

100+ Python challenging programming exercises 8 Question 71 Please write a program which accepts basic mathematic expression from console and print the evaluation result. 请编写一个从控制台接受基本数学表达式的程序,并打印评估结果。 Example: If the follo…

每日一练:LeeCode-20. 有效的括号(简)【栈】

给定一个只包括 ‘(’&#xff0c;‘)’&#xff0c;‘{’&#xff0c;‘}’&#xff0c;‘[’&#xff0c;‘]’ 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 每个右括号都有…

隧道代理HTTP工作原理:一场奇妙的网络魔法表演

嘿&#xff0c;小伙伴们&#xff01;今天我们要一起探索一个有趣的话题——隧道代理HTTP的工作原理。这不是普通的表演&#xff0c;而是一场奇妙的网络魔法表演&#xff01; 首先&#xff0c;让我们想象一下&#xff0c;网络世界就像一个大舞台&#xff0c;而我们每个人都是这…

Linux驱动开发简易流程

推荐视频&#xff1a; 正点原子【第四期】手把手教你学 Linux之驱动开发篇 小智-学长嵌入式Linux&Android底层开发入门教程 能力矩阵 基础能力矩阵 熟悉c/c、熟悉数据结构 熟悉linux系统&#xff0c;Shell脚本&#xff0c;Makefile/cmake/mk 文件IO、多线程、竞争、并发…

深度优先和广度优先

文章目录 前言一、深度和广度的区别二、代码演示1.准备数据,构造树2.深度优先遍历3.广度优先遍历 总结 前言 深度优先和广度优先的区别&#xff1a; 搜索方式不同 。深度优先搜索算法不全部保留结点&#xff0c;扩展完的结点从数据库中弹出删去&#xff1b;广度优先搜索算法需…

oracle-sga-shared_pool

shared pool 缓冲sql语句和执行计划 shared pool由三部分组成 free libray&#xff1a;缓存sql执行计划 row cathe &#xff1a;缓存数据字典 硬解析&#xff1a;1判断语法2判断对象是否存在3有没有权限4 从n个执行方案中选出最优解&#xff0c;生成执行计划&#xff0c;这一…

壮志酬筹>业务被裁>副业转正>收入回正。一个前黑马程序员老师的2023

从年初时的踌躇满志&#xff0c;到年中时整个业务线被砍。全职做前端训练营&#xff0c;四个多月的时间帮助100多名同学拿到了满意的offer&#xff0c;同时也让我的收入重归正轨。仅以这个视频记录我&#xff0c;一个普通程序员的 2023 。 视频版可直接访问 Hello&#xff0c;大…

基于ElementUI二次封装弹窗组件

效果&#xff1a; 一、自定义内容类型弹窗 <!-- title&#xff1a;对话框的标题confirmLoading&#xff1a;当前是否处于提交中titleCenter&#xff1a;对话框标题居中方式footerCenter&#xff1a;底部按钮的对其方式visible&#xff1a;是否显示弹窗width&#xff1a;设置…

JavaScript:正则表达式

JavaScript&#xff1a;正则表达式 什么是正则表达式正则表达式语法定义正则表达式判断是否有匹配的字符串查找匹配的字符串 正则表达式匹配法则元字符边界符量词字符类 什么是正则表达式 正则表达式用于匹配字符串中字符的组合模式。 正则表达式会依据其自身语法&#xff0c;…

2023 搞懂git 工作目录---暂存区---本地仓库---版本库

最近了解了下git的底层原理&#xff08;大神录制的视频放在最下方&#xff09;&#xff0c;记录下&#xff1a; 工作区 就是存放待提交文件的目录&#xff08;下图图解标注&#xff09;比如pyhon_test目录暂存区 .git目录下的index文件 对应的指令 git add本地仓库 .gi…

图片格式 WebP、JPEG、PNG、SVG 及转换

文章目录 图片格式 WebP、JPEG、PNG、SVG 及转换1. 图片格式1.1 WebP1.2 JPEG1.3 PNG1.4 SVG1.5 ... 2. 格式转换2.1 Python 批量转 WebP2.2 在线转换工具2.2.1 Shutterstock2.2.2 PicWish2.2.3 MyEdit2.2.4 Freeconvert2.2.5 iLoveIMG Reference 图片格式 WebP、JPEG、PNG、SV…

数据压缩专题——静止图像的小波变换编码

随着数字图像技术的发展和应用的广泛&#xff0c;对图像的压缩和编码变得越来越重要。小波变换编码作为一种有效的图像压缩和编码方法&#xff0c;在静止图像处理中得到了广泛应用。本文将介绍静止图像的小波变换编码的基本原理和关键步骤&#xff0c;以及其在图像压缩中的应用…

nginx+keepalived实现七层负载

目录 一、部署nginx01、nginx02 二、keepalived配置&#xff08;抢占模式、master- backup模式&#xff09; 三、测试 四、非抢占模式&#xff08;backup-backup模式&#xff09; nginx01 11.0.1.31nginx0211.0.1.32虚拟IP&#xff08;VIP&#xff09;11.0.1.30 一、部署ngin…