1
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
2

3
// 静态路由数组
4
export const constantRoutes: RouteRecordRaw[] = [
5
  {
6
    // 路由路径
7
    path: '/',
8
    // 路由组件
9
    component: Layout,
10
    // 路由元信息
11
    meta: {
12
      title: '首页',
13
      icon: 'icon-home'
14
    },
15
    // 子路由
16
    children: [
17
      // 子路由配置
18
    ]
19
  }
20
];

1
meta: {
2
  title: '页面标题', // 用于面包屑、标签页、浏览器标题
3
  icon: 'icon-home', // 用于侧边栏图标
4
  affix: true, // 是否固定在标签页
5
  showSidebar: true, // 是否在侧边栏显示
6
  breadcrumb: true, // 是否显示面包屑
7
  requiresAuth: true, // 是否需要登录权限
8
  roles: ['admin', 'editor'], // 允许访问的角色
9
  keepAlive: true // 是否缓存组件
10
}

1
{
2
  path: '/parent',
3
  component: ParentComponent,
4
  children: [
5
    {
6
      // 匹配 /parent/child
7
      path: 'child',
8
      component: ChildComponent
9
    },
10
    {
11
      // 匹配 /parent/child/:id
12
      path: 'child/:id',
13
      component: ChildDetailComponent
14
    }
15
  ]
16
}

1
├── 登录页 (/login)
2
├── 404页 (/404)
3
├── 重定向页 (/redirect/:path(.*))
4
└── 首页 (/)
5
    └── 仪表盘 (/dashboard)

1
├── 业务模块1 (/module1)
2
│   ├── 列表页 (/module1/list)
3
│   └── 详情页 (/module1/:id)
4
│       ├── 基础信息 (/module1/:id/base)
5
│       └── 高级设置 (/module1/:id/advanced)
6
└── 业务模块2 (/module2)
7
    └── 功能页 (/module2/function)

1
├── 系统设置 (/system)
2
│   ├── 内容管理 (/system/content)
3
│   │   ├── 文章管理 (/system/content/articles)
4
│   │   └── 分类管理 (/system/content/categories)
5
│   ├── 用户管理 (/system/user)
6
│   └── 权限管理 (/system/permission)

1
// 创建路由实例
2
const router = createRouter({
3
  // 路由模式：hash 或 history
4
  // hash模式：createWebHashHistory()
5
  // history模式：createWebHistory(import.meta.env.BASE_URL)
6
  history: createWebHistory(import.meta.env.BASE_URL),
7
  // 路由数组
8
  routes: constantRoutes as RouteRecordRaw[],
9
  // 滚动行为配置
10
  scrollBehavior: () => ({ left: 0, top: 0 })
11
});

1
scrollBehavior: (to, from, savedPosition) => {
2
  // 如果是返回，保持原滚动位置
3
  if (savedPosition) {
4
    return savedPosition;
5
  } else {
6
    // 否则滚动到顶部
7
    return { left: 0, top: 0 };
8
  }
9
}

1
router.beforeEach((to, from, next) => {
2
  // 权限检查逻辑
3
  if (to.meta.requiresAuth && !isLoggedIn()) {
4
    next('/login');
5
  } else {
6
    next();
7
  }
8
});

1
export function resetRouter() {
2
  // 重置路由逻辑
3
  permissionStore.routes.forEach(route => {
4
    const name = route.name;
5
    if (name && router.hasRoute(name)) {
6
      router.removeRoute(name);
7
    }
8
  });
9
}

1
// 基础路由拆分
2
src/router/
3
├── index.ts          // 路由主文件
4
├── constantRoutes.ts // 静态路由配置
5
├── asyncRoutes.ts    // 动态路由配置
6
└── modules/          // 模块化路由
7
    ├── user.ts       // 用户模块路由
8
    └── system.ts     // 系统模块路由

1
// 静态路由：不需要权限即可访问的路由
2
export const constantRoutes: RouteRecordRaw[] = [
3
  { path: '/login', component: Login },
4
  { path: '/404', component: NotFound },
5
  { path: '/', component: Layout, redirect: '/dashboard' }
6
];

1
// 动态路由：需要权限才能访问的路由
2
export const asyncRoutes: RouteRecordRaw[] = [
3
  {
4
    path: '/admin',
5
    component: Layout,
6
    meta: {
7
      roles: ['admin'] // 只有 admin 角色可以访问
8
    },
9
    children: [
10
      // 管理员功能路由
11
    ]
12
  }
13
];

1
// 初始只加载静态路由
2
const router = createRouter({
3
  history: createWebHistory(import.meta.env.BASE_URL),
4
  routes: constantRoutes
5
});
6

7
// 登录后根据权限动态添加路由
8
export function addRoutes(routes: RouteRecordRaw[]) {
9
  routes.forEach(route => {
10
    router.addRoute(route);
11
  });
12
}

1
// 推荐：使用动态导入实现懒加载
2
component: () => import('@/views/dashboard/index.vue')
3

4
// 不推荐：直接导入组件
5
import Dashboard from '@/views/dashboard/index.vue';
6
component: Dashboard

1
<!-- 在 App.vue 中使用 keep-alive 缓存路由组件 -->
2
<template>
3
  <router-view v-slot="{ Component }">
4
    <keep-alive>
5
      <component :is="Component" v-if="$route.meta.keepAlive" />
6
    </keep-alive>
7
    <component :is="Component" v-else />
8
  </router-view>
9
</template>

1
// 按模块分割路由
2
const UserRoutes = () => import('./modules/user');
3
const SystemRoutes = () => import('./modules/system');
4

5
// 路由注册
6
router.addRoute(UserRoutes);
7
router.addRoute(SystemRoutes);

1
// 打印路由信息
2
router.beforeEach((to, from) => {
3
  console.log('从', from.path, '跳转到', to.path);
4
  console.log('路由元信息:', to.meta);
5
});

1
// 使用 Vue Test Utils 测试路由
2
import { mount } from '@vue/test-utils';
3
import { createRouter, createWebHistory } from 'vue-router';
4

5
const router = createRouter({
6
  history: createWebHistory(),
7
  routes: constantRoutes
8
});
9

10
const wrapper = mount(App, {
11
  global: {
12
    plugins: [router]
13
  }
14
});