在 Vue 3 中，Vue Router 引入了一些新的组合 API，包括 useRoute 和 useRouter，它们极大地简化了路由的管理和访问。这篇博客将详细介绍这两个函数的用法及其在实际开发中的应用。
1. useRoute 的概述
useRoute 是一个组合式 API，允许我们在组件中访问当前路由的信息。它返回一个响应式对象，包含了当前路由的所有相关信息。
1.1 使用方法
要使用 useRoute，首先需要在组件中导入它，并在 setup 函数中调用：
<template>
<div>
<h1>当前路径: {
{ route.path }}</h1>
<h2>路由参数: {
{ route.params.id }}</h2>
</div>
</template>
<script>
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
return {
route,
};
},
};
</script>
1.2 useRoute 返回的属性
useRoute 返回的对象包括以下重要属性：
path: 当前路由的路径。params: 路由参数，通常用于动态路由。query: 查询参数，来自 URL 的查询字符串。hash: URL 的哈希部分。matched: 当前路由的所有匹配记录。
1.3 示例：访问动态路由参数
<template>
<div>
<h1>用户 ID: {
{ route.params.userId }}</h1>
</div>
</template>
<script>
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
return {
route,
};
},
};
</script>
2. useRouter 的概述
useRouter 也是一个组合式 API，它允许我们在组件中访问 Vue Router 实例，从而能够执行路由导航操作。
2.1 使用方法
与 useRoute 类似，首先需要在组件中导入 useRouter，并在 setup 函数中调用：
<template>
<button @click="navigateToHome">返回首页</button>
</template>
<script>
import { useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
const navigateToHome = () => {
router.push('/');
};
return {
navigateToHome,
};
},
};
</script>
2.2 useRouter 常用方法
useRouter 返回的路由实例提供了几个常用的方法：
push(location): 导航到新的 URL。replace(location): 以新 URL 替换当前 URL。go(n): 导航到相对位置（例如，go(-1)返回上一页）。back(): 返回到上一个历史记录条目。
2.3 示例：在组件中实现路由跳转
<template>
<button @click="goToProfile">查看个人资料</button>
</template>
<script>
import { useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
const goToProfile = () => {
router.push({ name: 'Profile', params: { userId: 123 } });
};
return {
goToProfile,
};
},
};
</script>
3. 结合 useRoute 和 useRouter
在实际开发中，useRoute 和 useRouter 通常是一起使用的，以便在响应路由变化时进行导航或处理逻辑。
3.1 示例：根据路由参数条件导航
<template>
<div>
<h1>当前用户: {
{ route.params.userId }}</h1>
<button @click="navigateToHome">返回首页</button>
</div>
</template>
<script>
import { useRoute, useRouter } from 'vue-router';
export default {
setup() {
const route = useRoute();
const router = useRouter();
const navigateToHome = () => {
if (route.params.userId) {
router.push('/');
}
};
return {
route,
navigateToHome,
};
},
};
</script>