Vue3 项目中 Vue Router 4 的集成与应用

在 Vue3 项目开发里，Vue Router 4 是构建单页面应用路由系统的关键工具，它能够实现页面间流畅的导航与状态管理。接下来，将逐步详解其安装、集成及基础应用流程。

一、安装

借助 npm 包管理器，执行以下命令轻松安装 Vue Router 4：

npm i vue-router@4

二、集成

1. 新建示例页面

在 src/views 目录下创建两个示例页面 home.vue 和 login.vue，用于演示路由功能。

home.vue 示例代码如下：

<script setup lang="ts">
defineOptions({
  name: 'V-home'
})
</script>
 
<template>
  <div>home page</div>
</template>
 
<style scoped></style>

login.vue 与之类似，仅需修改 defineOptions 中的 name 属性为独特标识，例如 V-login，以便后续路由识别与调试。

2. 构建路由目录结构

于 src 目录下新建 router 文件夹，该文件夹作为路由模块核心区域，结构设计如下：

src
|   
+---router
|   |   index.ts
|   +---modules
|       |   static.ts

index.ts 作为路由入口文件，统筹整个路由系统的初始化、配置及与 Vue 应用的挂载。
modules 文件夹用于存放不同类型路由模块，在此示例中，static.ts 定义静态路由，后续可按需拓展其他路由分类，如动态路由、权限路由等。

static.ts 内容专注于静态路由定义：

const routes = [
  {
    path: '/',
    component: () => import('@/views/home.vue')
  },
  {
    path: '/login',
    component: () => import('@/views/login.vue') // 路由懒加载，提升初始加载性能，按需加载组件
  }
]
 
export default routes

此代码片段声明了两个基础路由，分别指向首页和登录页，采用路由懒加载方式，仅在用户访问对应路径时才加载组件代码。

index.ts 作为路由核心枢纽，代码解析如下：

import { Router, createRouter, createWebHistory } from 'vue-router';
 
/** 自动导入 src/router/modules 下的静态路由
 * import.meta.glob使用说明：https://cn.vitejs.dev/guide/features#glob-import
 */
const modules: Record<string, any> = import.meta.glob(['./modules/**/*.ts'], {
  eager: true
});
 
/** 初始路由 **/
const routes: any[] = [];
 
Object.keys(modules).forEach((key) => {
  const module = modules[key].default;
  if (Array.isArray(module)) {
    for (const item of module) {
      routes.push(item);
    }
  } else {
    routes.push(module);
  }
});
 
/**
 * 创建路由实例
 * createRouter选项有：https://router.vuejs.org/zh/api/interfaces/RouterOptions.html
 * hash模式使用createWebHashHistory(): https://router.vuejs.org/zh/api/#Functions-createWebHashHistory
 */
export const router: Router = createRouter({
  history: createWebHistory(),
  routes,
  strict: true,
  scrollBehavior(_to, from, savedPosition) {
    return new Promise((resolve) => {
      if (savedPosition) {
        return savedPosition;
      } else {
        if (from.meta.saveSrollTop) {
          const top: number = document.documentElement.scrollTop || document.body.scrollTop;
          resolve({ left: 0, top });
        }
      }
    });
  }
});
 
/**
 * 路由守卫
 * https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
 */
router.beforeEach((to, _from, next) => {
  // isAuthenticated 代表你的鉴权
  const isAuthenticated = true;
  if (to.name!== 'Login' &&!isAuthenticated) next({ name: 'Login' });
  else next();
});
 
export default router;

这段代码实现了多项关键功能：

利用 import.meta.glob 动态导入 modules 文件夹下所有 .ts 路由模块文件，将其整合至统一路由数组。
创建 createRouter 实例，配置路由历史模式为 createWebHistory()，适用于常规 URL 路由，同时传入整理好的路由数组及其他设置，如严格模式开启、自定义滚动行为，确保页面切换时滚动位置符合预期。
定义全局前置路由守卫，此处简单模拟鉴权逻辑，若用户未认证且访问非登录页，将重定向至登录页，保障应用安全访问。

3. 修改 `App.vue`

App.vue 作为 Vue 应用主组件，承担承载路由及提供导航入口职责。修改后代码如下：

<script setup lang="ts"></script>
 
<template>
  <router-link to="/"> 去首页 </router-link> 丨 <router-link to="/login"> 去登录 </router-link>
  <router-view />
</template>
 
<style scoped></style>

router-link 组件生成导航链接，to 属性指向目标路由路径；router-view 则是路由内容渲染出口，依据当前路由动态展示对应组件内容。

4. 修改 `main.ts`

在 Vue 应用启动入口文件 main.ts 中，集成路由实例，使整个应用具备路由功能：

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
 
import router from '@/router/index';
 
createApp(App).use(router).mount('#app');

通过 createApp(App).use(router) 将路由实例挂载至 Vue 应用，随后 mount('#app') 将应用挂载至指定 DOM 元素。

三、预览

完成上述集成步骤后，启动项目（如执行 npm run dev），即可在浏览器中预览路由效果，点击导航链接流畅切换首页与登录页，感受 Vue Router 4 带来的便捷页面导航体验。

四、拓展延伸

除上述基础路由集成，Vue Router 4 还支持丰富高级功能，像路由传参，可在组件间传递数据；重定向，灵活调整路由跳转逻辑；动态路由，适配不同参数化页面场景；过渡动效，为页面切换增添流畅动画效果等。详细用法与案例，请参考 Vue Router 4 官方文档，持续探索优化项目路由系统，打造更强大用户体验。

Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router