Vue Router 4 与 Vue 3 路由实战

🎯 引言

学会这篇文章，你将掌握在 Vue 3 项目中使用 Vue Router 4 的方法。你会了解 Vue Router 4 与 Vue Router 3 的核心区别，学会用 createRouter 创建路由实例、在 <script setup> 中用 useRoute 和 useRouter 获取路由信息，以及导航守卫在组合式 API 下的新写法。如果你已经学过 Vue 2 的 Vue Router，这篇文章会帮你快速迁移到 Vue 3 生态。

🛣️ Vue Router 4 是什么

Vue Router 4 是配合 Vue 3 使用的官方路由库，版本号从 3 升级到 4，底层完全用 Vue 3 的响应式系统和应用实例模型重写。

它和 Vue Router 3 的关系很简单：

• Vue Router 3 → 用于 Vue 2 项目
• Vue Router 4 → 用于 Vue 3 项目

两者在路由表配置、<router-view>、<router-link> 等核心概念上保持一致，所以之前学过的路由知识大部分都能直接复用。主要变化集中在创建路由实例的方式、history 模式的写法、全局 API 的注入方式，以及组合式 API 中如何获取路由对象。

⚙️ 安装与创建路由实例

安装 Vue Router 4

在 Vue 3 项目中，需要安装 vue-router 的 4.x 版本：

npm install vue-router@4

用 createRouter 创建实例

Vue Router 4 不再使用 new VueRouter()，而是用 createRouter() 工厂函数创建实例。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

history 模式的新写法

Vue Router 3 用 mode: 'history' 或 mode: 'hash' 控制路由模式，Vue Router 4 改成了显式的 history 函数：

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

🔌 注入到 Vue 3 应用

Vue 3 使用 createApp 创建应用实例，路由通过 app.use(router) 注册，而不是像 Vue 2 那样在 new Vue({ router }) 中传入。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);
app.mount('#app');

这样，整个应用就拥有了路由能力，组件中可以通过组合式 API 或选项式 API 访问路由信息。

🧭 在组件中使用路由（Composition API）

在 <script setup> 中，我们不再通过 this.$route 和 this.$router 访问路由，而是用 useRoute 和 useRouter 两个组合式函数。

useRoute 获取当前路由信息

<template>
    <div>
        <p>用户 ID：{{ userId }}</p>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const userId = computed(() => route.params.id);
</script>

useRouter 获取路由实例

<template>
    <button @click="handleLogin">登录后跳转</button>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

function handleLogin() {
    // 登录逻辑 ...
    router.push('/dashboard');
}
</script>

🛡️ 导航守卫的新写法

Vue Router 4 的导航守卫整体思路和 Vue Router 3 一致，但全局守卫支持更现代的返回值写法，组件内守卫也可以用组合式 API 注册。

全局前置守卫

在 Vue Router 4 中，beforeEach 除了可以继续用 next()，也支持直接返回值来控制导航：

router.beforeEach((to, from) => {
    const isLogin = Boolean(localStorage.getItem('token'));

    // 未登录且访问需要权限的页面，重定向到登录页
    if (!isLogin && to.meta.requiresAuth) {
        return '/login';
    }
});

• 返回 false：取消导航
• 返回路由路径或对象：重定向到指定路由
• 不返回或返回 undefined：继续导航

组合式 API 中的组件内守卫

Vue Router 4 提供了 onBeforeRouteLeave 和 onBeforeRouteUpdate，直接在 <script setup> 中使用：

<script setup>
import { onBeforeRouteLeave } from 'vue-router';

onBeforeRouteLeave(() => {
    const isSaved = confirm('离开页面前是否保存？');

    if (!isSaved) {
        return false;
    }
});
</script>

🧾 小节总结

• Vue Router 4 是 Vue 3 的官方路由库，安装时使用 vue-router@4。
• 路由实例用 createRouter() 创建，history 模式用 createWebHistory() 或 createWebHashHistory()。
• 通过 app.use(router) 将路由注入 Vue 3 应用。
• 在 <script setup> 中用 useRoute 获取当前路由信息，用 useRouter 执行跳转。
• 全局守卫支持直接返回路径或 false，组件内守卫可用 onBeforeRouteLeave 和 onBeforeRouteUpdate。

❓ 知识问答（Q&A）

Q：Vue Router 4 和 Vue Router 3 最大的区别是什么？

A：最大区别是创建和注入方式。Vue Router 4 使用 createRouter() 创建实例，并通过 app.use(router) 注入 Vue 3 应用，同时 history 模式改用 createWebHistory() 等函数。

Q：在 <script setup> 中如何获取当前路由参数？

A：使用 useRoute() 获取当前路由对象，参数通过 route.params 访问，例如 route.params.id。

Q：createWebHistory() 部署后刷新页面 404 怎么办？

A：这是 history 模式的特性，需要服务器配置 fallback，将所有路由指向 index.html。Vite 开发环境已处理，生产部署时需要额外配置 Nginx、Apache 等服务器。

🧪 小练习

练习 1

补全以下 Vue 3 路由配置，使用 createRouter 和 createWebHistory，并注册到应用中：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

// 请在这里定义 routes 数组，包含 / 和 /about 两个路由

const router = createRouter({
    // 请补充 history 和 routes
});

export default router;

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

// 请创建应用实例并注册路由

练习 2

在 <script setup> 中实现一个页面跳转按钮，点击后跳转到 /profile：

<template>
    <button @click="goProfile">进入个人中心</button>
</template>

<script setup>
// 请在这里导入并使用 useRouter
</script>

🎉 恭喜你已经掌握在 Vue 3 项目中使用 Vue Router 4 的核心技能啦！你可以用 createRouter 创建路由、用 useRoute 和 useRouter 在组合式 API 中操作路由，还能用新版导航守卫控制页面访问。继续加油，把 Vue 3 生态全家桶学扎实！