vue3 如何使用 Vue- Router Hooks 開發
作者：前端老兵
除了常規的 beforeEach 和 beforeRouteEnter 等全局或局部守衛外，Vue 3 還支持在組件中使用 setup() 函數來實現更細粒度的路由控制邏輯。
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 的基本步驟。你可以根據實際需求調整路由配置和組件邏輯。
責任編輯：武曉燕
來源：
前端愛好者
