Vue3 项目初始化(五) router

一: 目录

二: 设置layouts

创建layouts/default/index.vue

<template>
  <RouterView></RouterView>
</template>

三: 基础路由

创建基础路由 basicRouter.ts 

import type { AppRouteModule } from '@/router/types'

const LAYOUT = () => import('@/layouts/default/index.vue')
// 基础路由
export const basicRoutes: AppRouteModule[] = [
  {
    path: '/',
    name: 'Root',
    redirect: '/question',
    meta: {
      title: '首页',
      hideBreadcrumb: true,
      hideMenu: true
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue'),
    meta: {
      title: '登录',
      hideBreadcrumb: true,
      hideMenu: true
    }
  },
  {
    path: '/redirect/:path(.*)/:_redirect_type(.*)/:_origin_params(.*)?',
    component: () => import('@/views/redirect/index.vue'),
    name: 'RedirectTo',
    meta: {
      title: '重定向',
      hideBreadcrumb: true,
      hideMenu: true
    }
  },
  {
    path: '/error',
    name: 'Error',
    component: LAYOUT,
    redirect: '/error/403',
    meta: {
      title: '异常页面',
      hideBreadcrumb: true,
      hideMenu: true
    },
    children: [
      {
        path: '/error/:code(403|404|500)',
        name: '页面异常',
        component: () => import('@/views/error/index.vue'),
        meta: {
          title: '403'
        }
      }
    ]
  },
  {
    path: '/:path(.*)*',
    name: '404',
    redirect: '/error/404',
    meta: {
      title: 'ErrorPage',
      hideBreadcrumb: true,
      hideMenu: true
    }
  }
]

四: 导入路由

 router/index.ts 支持路由自动导入(待完善)

import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import type { AppRouteModule } from '@/router/types'
import { basicRoutes } from './basicRouter'
import type { App } from 'vue'

// 设置路由白名单
const WHITE_NAME_LIST: string[] = []
// 白名单应该包含基本静态路由
const getRouteNames = (array: any[]) =>
  array.forEach(item => {
    WHITE_NAME_LIST.push(item.name)
    getRouteNames(item.children || [])
  })
getRouteNames(basicRoutes)
// 导入modules目录下的所有的路由 免除手动导入
const modules = import.meta.glob('./modules/**/*.ts', { eager: true })
const routeModuleList: AppRouteModule[] = []
// 加入到路由集合中
Object.keys(modules).forEach(key => {
  const mod = modules[key].default || {}
  const modList = Array.isArray(mod) ? [...mod] : [mod]
  routeModuleList.push(...modList)
})
// 权限路由处理 此处代码根据业务需求进行变更
export const asyncRoutes = [...routeModuleList]
// 创建路由
export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: basicRoutes.concat(asyncRoutes) as RouteRecordRaw[],
  strict: true,
  scrollBehavior: () => ({ left: 0, top: 0 })
})

// 初始化路由
export function initRouter() {
  router.getRoutes().forEach(route => {
    const { name } = route
    if (name && !WHITE_NAME_LIST.includes(name as string)) {
      router.hasRoute(name) && router.removeRoute(name)
    }
  })
}

// 切换角色之后 刷新路由
export function resetRouter() {
  router.getRoutes().forEach(route => {
    const { name } = route
    if (name && !WHITE_NAME_LIST.includes(name as string)) {
      router.hasRoute(name) && router.removeRoute(name)
    }
  })
}
// 登录之后 添加异步路由
export function AddSyncRouter() {
  router.getRoutes().forEach(route => {
    const { name } = route
    if (name && !WHITE_NAME_LIST.includes(name as string)) {
      router.hasRoute(name) && router.removeRoute(name)
    }
  })
}
// 配置路由器
export function setupRouter(app: App<Element>) {
  app.use(router)
}

五: 修改引入

修改main.ts 引入路由

import './styles/reset.scss'
import './styles/index.scss'

import 'amfe-flexible'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import { setupRouter } from '@/router'

const app = createApp(App)

app.use(createPinia())
// 配置路由
setupRouter(app)

app.mount('#app')