1. vue3 如何 使用 vue- router hooks 开发
Vue 3 中使用 vue-router 和 hooks 可以让你的组件更加函数化，并且可以利用 Vue 3 的 Composition API。
下面是一个简单的步骤来说明如何在 Vue 3 中使用 vue-router 和 hooks 进行开发。
1.1. 安装 vue-router
首先确保你已经安装了 vue-router 的最新版本（v4.x）。
如果还没有安装，可以使用 npm 或 yarn 来安装：
npm install vue-router@next
// # 或者
yarn add vue-router@next1.2. 设置路由
在你的项目中创建一个 router 文件夹，并在里面创建一个 index.js 文件，用于配置你的路由：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
// 更多路由...
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;1.3. 在主应用文件中使用路由器
确保你在主应用文件（通常是 main.js 或 main.ts）中引入并使用路由器：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');1.4. 使用 Composition API 和 Router Hooks
现在你可以在任何 Vue 组件中使用 Composition API 和 vue-router 提供的 hooks。
例如，你可以使用 useRoute 和 useRouter 来获取当前路由的信息以及路由导航的方法：
<template>
<div>
<h1>{{ route.meta.title }}</h1>
<button @click="goBack">返回</button>
</div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const goBack = () => {
router.go(-1);
};
</script>在这个例子中，我们使用 useRoute 获取了当前的路由对象，使用 useRouter 获取了路由器实例，然后定义了一个 goBack 方法来导航回上一个页面。
1.5. 路由守卫
除了常规的 beforeEach 和 beforeRouteEnter 等全局或局部守卫外，Vue 3 还支持在组件中使用 setup() 函数来实现更细粒度的路由控制逻辑。
以上就是使用 Vue 3 和 vue-router hooks 的基本步骤。你可以根据实际需求调整路由配置和组件逻辑。
