1. vue3 如何 使用 vue- router hooks 開發(fā)

Vue 3 中使用 vue-router 和 hooks 可以讓你的組件更加函數(shù)化，并且可以利用 Vue 3 的 Composition API。

下面是一個(gè)簡單的步驟來說明如何在 Vue 3 中使用 vue-router 和 hooks 進(jìn)行開發(fā)。

1.1. 安裝 vue-router

首先確保你已經(jīng)安裝了 vue-router 的最新版本（v4.x）。

如果還沒有安裝，可以使用 npm 或 yarn 來安裝：

npm install vue-router@next
// # 或者
yarn add vue-router@next

1.2. 設(shè)置路由

在你的項(xiàng)目中創(chuàng)建一個(gè) router 文件夾，并在里面創(chuàng)建一個(gè) 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. 在主應(yīng)用文件中使用路由器

確保你在主應(yīng)用文件（通常是 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

現(xiàn)在你可以在任何 Vue 組件中使用 Composition API 和 vue-router 提供的 hooks。

例如，你可以使用 useRoute 和 useRouter 來獲取當(dāng)前路由的信息以及路由導(dǎo)航的方法：

<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>

在這個(gè)例子中，我們使用 useRoute 獲取了當(dāng)前的路由對(duì)象，使用 useRouter 獲取了路由器實(shí)例，然后定義了一個(gè) goBack 方法來導(dǎo)航回上一個(gè)頁面。

1.5. 路由守衛(wèi)

除了常規(guī)的 beforeEach 和 beforeRouteEnter 等全局或局部守衛(wèi)外，Vue 3 還支持在組件中使用 setup() 函數(shù)來實(shí)現(xiàn)更細(xì)粒度的路由控制邏輯。

以上就是使用 Vue 3 和 vue-router hooks 的基本步驟。你可以根據(jù)實(shí)際需求調(diào)整路由配置和組件邏輯。