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)文件名…

python + flask+nginx+mysql环境安装详解

一、下载安装Nginx服务 运行以下命令安装Nginx。 yum -y install nginx 运行以下命令查看Nginx版本。 nginx -v 返回结果如下所示&#xff0c;表示Nginx安装成功。 nginx version: nginx/1.20.1 二、安装Mysql5.7 运行以下命令更新YUM源。 rpm -Uvh http://dev.mysql.com/get…

Arduino驱动TMF8801 ToF激光测距传感器(距离传感器)

目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 <

【游戏】如何开发一款游戏:游戏开发流程及所需工具

游戏作为娱乐生活的一个方面&#xff0c;参与其中的人越来越多&#xff0c;而大部分参与其中的人都是以玩家的身份。 他们热爱一款游戏&#xff0c;或是被游戏的故事情节、炫丽的场景、动听的音乐所艳羡&#xff0c;亦或是被游戏中角色扮演、炫酷的技能、有趣的任务所吸引&…

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;万界星空科技发掘制造行业生产及物流难点、…

Linux防火墙设置查看攻略

inux系统是一种常用的服务器操作系统&#xff0c;它的安全性备受关注。为了保障系统网络的安全linux查看防火墙设置&#xff0c;管理员需要设置防火墙规则。本文将从8个方面详细介绍如何查看Linux防火墙设置。 1.查看当前防火墙状态 在Linux系统中&#xff0c;默认安装iptabl…

图像的颜色及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; 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 每个右括号都有…

pinia--vue3中的状态管理

一、Pinia是什么&#xff1f; Pinia 是 Vue 的存储库&#xff0c;它允许跨组件/页面共享状态。实际上&#xff0c;pinia就是Vuex的升级版&#xff0c;官网也说过&#xff0c;为了尊重原作者&#xff0c;所以取名pinia&#xff0c;而没有取名Vuex&#xff0c;所以大家可以直接将…

Mybatis 日志配置

要查看MyBatis的日志语句&#xff0c;您可以在一个包、一个完全限定的映射器类名、一个命名空间或一个完全限定的语句名称上启用日志记录。 再次强调&#xff0c;如何做这取决于所使用的日志实现。我们将展示如何在SLF4J(Logback)中进行配置。配置日志服务只需添加一个或多个额…

zdppy_api框架快速入门

概述 zdppy_api是一款为了快速开发而生的&#xff0c;基于异步的&#xff0c;使用简单的Python后端API接口开发框架。 本框架的目标是让Python后端开发变得越来越简单&#xff0c;直到发现原来还可以更简单&#xff01; 一切都是为了提高开发效率&#xff01;&#xff01;&…

标题:探索C语言中的While循环结构

各位少年&#xff1a; 在C语言编程中&#xff0c;循环是一种强大的工具&#xff0c;它允许我们重复执行一段代码&#xff0c;直到满足特定的条件为止。其中&#xff0c;while循环是一种常用的循环结构&#xff0c;它以其简洁的语法和灵活的应用场景赢得了程序员们的青睐。下面…

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

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

RK3566 Android 11平台上适配YT8512C 100M PHY

RK3566代码之前适配的1000M IC RTL8211F , 现在需要在之前的基础上修改PHY IC 为裕泰的YT8512C ----------------------------------------------------------------------//将1000M 的配置关掉&#xff0c;改为100M 配置,查看RK3566 资料关于以太网的配置即可知道如何修改 #if…

Linux驱动开发简易流程

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