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>