官方文档：

https://router.vuejs.org/zh/api/#Functions-useRoute

useRoute():返回当前的路由地址。相当于在模板中使用 $route。

useRouter():返回路由器实例。相当于在模板中使用 $router。

useRoute( )函数

useRoute( )函数用于在组件中获取当前路由的信息，返回一个包含路由信息的对象。每一个路由都有一个route对象，这是一个局部的对象，可以从中获得name、path、params、query（如下所示）等当前路由信息的静态数据。

image-20240523152752247

使用案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
	<div id="app">
		<template v-if="route.path.startsWith('/user')">
			<NoHeaderLayouts />
		</template>
		<template v-else>
			<basic-layouts />
		</template>
	</div>
</template>

<script setup lang="ts">
	import BasicLayouts from '@/layouts/BasicLayouts.vue'
	import NoHeaderLayouts from '@/layouts/NoHeaderLayouts.vue'
	import {useRoute} from "vue-router";

	const route = useRoute()
</script>

<style scoped>
	#app {
	}
</style>

useRouter( )函数

router是VueRouter的一个对象，用于获取路由实例，可以通过他来进行一些动态的路由操作，比如实现路由跳转。其通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实力对象，这个对象是一个全局的对象，包含了许多关键的对象和属性。

代码举例：

实现路由的跳转，原理：实际上是对history对象的操作，是向history栈中添加一个路由，添加一条history记录。

1
2
3
4
const router = useRouter()
router.push({
	path: 'home'
})

总结

  1. useRoute( )主要用于获取当前页面的路由信息
  2. useRouter( )主要用于获取路由实例，用于对路由进行动态操作的场景