@tianyio/quality-helper/templates/project-templates/base/src/router/index.ts

A comprehensive quality helper tool for project scaffolding and management

import {
  createRouter,
  createWebHistory,
  type RouteRecordRaw,
  type Router,
  type NavigationFailure,
} from 'vue-router'

// 路由配置
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: {
      title: '首页',
      keepAlive: true,
      transition: 'fade',
    },
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    meta: {
      title: '关于',
      keepAlive: false,
      transition: 'slide-left',
    },
  },
  {
    path: '/pinia-demo',
    name: 'PiniaDemo',
    component: () => import('../components/PiniaDemo.vue'),
    meta: {
      title: 'Pinia 3.0.3 演示',
      requiresAuth: false,
      keepAlive: true,
    },
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('../views/NotFound.vue'),
    meta: {
      title: '页面未找到',
    },
  },
]

// 创建路由实例
const router: Router = createRouter({
  history: createWebHistory(import.meta.env.FAST_WIN_SITE_ROOT),
  routes,
  // 增强的滚动行为
  scrollBehavior: (to, from, savedPosition) => {
    // 如果有保存的位置（浏览器前进/后退）
    if (savedPosition) {
      return savedPosition
    }

    // 如果路由有锚点
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth',
      }
    }

    // 如果是同一个路由的不同参数，保持当前位置
    if (to.name === from.name) {
      return false
    }

    // 默认滚动到顶部
    return { top: 0, behavior: 'smooth' }
  },
  // 严格模式，确保路由匹配的准确性
  strict: true,
  // 敏感模式，区分大小写
  sensitive: false,
})

// 全局前置守卫 - 认证检查
router.beforeEach(async (to, from, next) => {
  try {
    // 开发环境下的路由日志
    if (import.meta.env.DEV) {
      console.log(`🧭 路由跳转: ${from.path} -> ${to.path}`)
    }

    // 检查是否需要认证
    if (to.meta?.['requiresAuth']) {
      // 这里可以添加认证逻辑
      // const isAuthenticated = await checkAuth()
      // if (!isAuthenticated) {
      //   next({ name: 'Login', query: { redirect: to.fullPath } })
      //   return
      // }
    }

    // 检查用户角色权限
    if (to.meta && Array.isArray(to.meta['roles']) && to.meta['roles'].length > 0) {
      // 这里可以添加角色检查逻辑
      // const userRoles = await getUserRoles()
      // const hasPermission = to.meta.roles.some(role => userRoles.includes(role))
      // if (!hasPermission) {
      //   next({ name: 'Forbidden' })
      //   return
      // }
    }

    next()
  } catch (error) {
    console.error('路由守卫错误:', error)
    next(false) // 取消导航
  }
})

// 全局解析守卫 - 在导航被确认之前调用
router.beforeResolve(async (to, from, next) => {
  try {
    // 设置页面标题
    if (to.meta?.['title']) {
      document.title = `${to.meta['title']} - FastWeb应用`
    }

    // 可以在这里添加数据预加载逻辑
    // if (to.meta?.preload) {
    //   await preloadData(to)
    // }

    next()
  } catch (error) {
    console.error('路由解析错误:', error)
    next(false)
  }
})

// 全局后置钩子
router.afterEach((to, from, failure) => {
  // 处理导航失败
  if (failure) {
    console.error('导航失败:', failure)
    return
  }

  // 页面访问统计
  if (import.meta.env.FAST_ENABLE_ANALYTICS === 'true') {
    console.log('📊 页面访问统计:', {
      path: to.path,
      name: to.name,
      params: to.params,
      query: to.query,
      timestamp: new Date().toISOString(),
    })
  }

  // 移除加载状态
  const loadingElement = document.querySelector('.route-loading')
  if (loadingElement) {
    loadingElement.remove()
  }
})

// 导航错误处理
router.onError((error: Error) => {
  console.error('路由错误:', error)

  // 可以在这里添加错误上报逻辑
  if (import.meta.env.PROD) {
    // reportError(error)
  }
})

// 路由工具函数
export const routerUtils = {
  /**
   * 安全的路由跳转
   */
  async safePush(to: string | object): Promise<void> {
    try {
      await router.push(to)
    } catch (error) {
      if (error && typeof error === 'object' && 'type' in error) {
        const navError = error as NavigationFailure
        // 忽略重复导航错误
        if (navError.type !== 16 /* NavigationFailureType.duplicated */) {
          console.error('导航失败:', navError)
        }
      } else {
        console.error('导航错误:', error)
      }
    }
  },

  /**
   * 安全的路由替换
   */
  async safeReplace(to: string | object): Promise<void> {
    try {
      await router.replace(to)
    } catch (error) {
      console.error('路由替换失败:', error)
    }
  },

  /**
   * 检查路由是否存在
   */
  hasRoute(name: string): boolean {
    return router.hasRoute(name)
  },

  /**
   * 获取当前路由信息
   */
  getCurrentRoute() {
    return router.currentRoute.value
  },
}

export default router