vueRouter4.0+ts

短命女 2022-10-16 06:04 279阅读 0赞

# 准备工作 #

## 需要了解的接口 ##

官方提供的路由对象数据类型

> RouteRecordRaw

**自定义定义路由对象数据类型**

// Omit 删除指定类型的key返回删除后的接口类型
    export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> { 
      name: string;
      meta: RouteMeta;
      component?: Component | string;
      components?: Component;//一个页面或者视图多个路由会使用
      children?: AppRouteRecordRaw[];
      props?: any;
      fullPath?: string;
    }

## 路由目录结构 ##

![在这里插入图片描述][20210527111743677.png]  
type 路由对象类型

### type.ts ###

export interface RouteMeta { 
      title: string;
    }
    export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> { 
      name: string;
      meta: RouteMeta;
      component?: Component | string;
      components?: Component;//一个页面或者视图多个路由会使用
      children?: AppRouteRecordRaw[];
      props?: any;
      fullPath?: string;
    }
    export type AppRouteModule = AppRouteRecordRaw;

### routes/index.ts ###

import {  RouteRecordRaw } from 'vue-router';
    // import.meta.globEager 是vite提供的函数可以引入指定目录里面的所有指定类型文件返回数组
    const modules = import.meta.globEager('./modules/**/*.ts');
    
    const routeModuleList: RouteRecordRaw[] = [];
    
    Object.keys(modules).forEach((key) => { 
      const mod = modules[key].default || { };
      // console.log('mod :>> ', mod);
      const modList = Array.isArray(mod) ? [...mod] : [mod];
      routeModuleList.push(...modList);
    });
    
    
    // 处理好数据后统一返回到 路由实例
    export const basicRoutes:RouteRecordRaw[] =routeModuleList;

# 创建路由module #

import {  AppRouteModule } from "../../types";
    const LoginRoute: AppRouteModule = { 
        path: '/login',
        name: 'Login',
        component: () => import('/@/views/sys/login/Login.vue'),
        meta: { 
          title: "登录",
        },
      };
    export default LoginRoute;

# 创建路由实例 #

import type {  App } from 'vue';
    import type {  RouteRecordRaw } from 'vue-router';
    import {  createRouter, createWebHashHistory } from 'vue-router';
    import {  basicRoutes } from './routes';
    /** * 创建路由实例 */
    export const router = createRouter({ 
        history:createWebHashHistory(),
        routes:(basicRoutes as unknown) as RouteRecordRaw[]
    });
    /** * 路由拦截 */
    router.beforeEach((to,from)=>{ 
      console.log('to :>> ', to,from);
    })
    /** * 挂载到vue实例函数 * @param app vue实例 */
    export function setupRouter(app: App<Element>) { 
      app.use(router);
    }
    
    export default router;

[20210527111743677.png]: /images/20221014/11c38c5f66dd45d9a726f16e3434f8c6.png