Bootstrap

Vue3-26-路由-useRouter 和 useRoute 两个API 的作用介绍

先来说说两个API 的作用

useRouter() : 返回的是项目中的 路由实例的对象
可以通过这个实例对象进行路由的逻辑跳转

useRoute() : 返回的是当前的 路由对象
可以在当前路由对象中获取到路由名称、路由参数、路由路径等玩完整的路由信息。

写个案例看一下具体是什么

项目描述 : 
1、router.ts 文件中配置并导出了 router路由实例的对象;
2、main.ts 文件中 使用了 router 路由实例,这样 整个项目中就可以进行路由跳转了;
3、App.vue 作为根组件,使用 <router-view> 标签 展示路由的目标组件;
4、componentA.vue 和 componentB.vue 是两个普通的组件;
5、通过 在组件中 引入两个API 来探究这两个API 到底是什么。
项目的目录解构如下 :
projectName
	| -- index.html
	| -- src
		| -- App.vue
		| -- main.ts
		| -- router.ts
		| -- componentA.vue
		| -- componentB.vue

<

;