【大厂企业级项目架构】之项目接入路由

本篇文章主要讲解如何给项目接入路由工具VueRouter,本次的内容不多,花个8分钟就能看完,最重要是动手实践。

对于现在的应用,路由基本上是必不可少的,因为我们本次的工程使用的是Vue,而VueRouterVue的官方路由,与Vue深度集成,所以是Vue项目的不二之选。接下来,跟着我一步步完成项目的路由接入。

安装VueRouter

我们使用的版本是4.1.3

pnpm i vue-router

使用VueRouter

创建路由相关的目录结构

首先在src目录下创建router目录,用于专门存放路由相关的代码,目前先按如下目录结构创建,后续根据实际情况做相应的调整即可:

router                     专门用于存放路由相关的源码
├── hooks                  路由钩子相关的目录,如全局路由守卫等
│   └── index.ts
├── index.ts               主入口文件,导出路由实例
└── routes                 路由表
    └── index.ts           路由表统一出口
    └── personalCenter.ts  个人中心相关路由
    └── .....              其他路由类似

主入口文件创建路由实例

router目录下的index.ts作为主入口文件,内容如下:

import { createRouter, createWebHistory } from 'vue-router';
import type { App } from 'vue';
import { routes } from './routes';
export const router = createRouter({
    // 以VITE_PUBLIC_PATH为根路径创建hash模式的路由
    history: createWebHistory(import.meta.env.VITE_PUBLIC_PATH),
    // 路由表
    routes,
    // 路由切换后,新的页面滚动回顶部
    scrollBehavior: () => ({ left: 0, top: 0 }),
});
export function setRouter(app: App) {
    app.use(router);
}

创建路由表

然后我们需要创建我们项目的路由表,在router目录下的routes就是用于维护我们的路由表的,通常我们会按不同的业务模块,在routes目录下分别创建各自对应的路由表,目录结构可以看上面,routes的主入口文件index.ts内容如下:

import type { RouteRecordRaw } from 'vue-router';
import { LOGIN, HOME } from '@/constants/routeName';
import Home from '@/views/home/index.vue';

// 这里是根路由,直接重定向到主页
const rootRoute: RouteRecordRaw = {
    path: '/',
    redirect: '/home',
};
// 主页面
const homeRoot: RouteRecordRaw = {
    path: '/home',
    name: HOME.HOME,
    component: Home,
    meta: {
        title: '首页',
    },
};
// 登录页
const loginRoute: RouteRecordRaw = {
    path: '/login',
    name: LOGIN.LOGIN,
    component: () => import('@/views/login/Login.vue'),
    meta: {
        title: '登录',
    },
};
// 统一的路由表出口,后面会新增其他很多页面的路由
export const routes = [rootRoute, loginRoute, homeRoot];

上面我们先随便创建了两个页面用于路由的测试

整个项目应用路由

上面创建好路由实例和路由表之后,就可以在我们的项目里使用路由了,我们需要在项目的主入口文件main.ts里面增加如下代码

import { setRouter, router } from '@/router';
// 使用路由
setRouter(app);

然后需要在App.vue里面添加router-view组件,就可以做切换路由了

<template>
<router-view />
</template>

增加路由钩子

我们后续需要在路由跳转前做一些例如取消上一个页面请求,开关loading等事情,因此需要添加路由守卫。

hooks/index.ts下增加如下代码,目前代码其实没干什么,只是留骨架在这里,等后续根据特定的需求增加相应的代码

import type { Router } from 'vue-router';
// 设置路由钩子
export const setRouteHooks = (router: Router) => {
    setGlobalGard(router);
};
// 设置全局路由守卫
// 在这里可以做一些事情:如取消页面请求,全局loading等
const setGlobalGard = (router: Router) => {
    // 全局前置守卫
    router.beforeEach(async (to) => {
        console.log('全局前置守卫执行,下一跳路由', to);
    });
    // 全局前置守卫
    router.afterEach((to) => {
        console.log('全局后置守卫执行', to);
    });
};

增加了之后,还需要在主入口文件的setRouter方法里面调用一下

export function setRouter(app: App) {
    app.use(router);
    // 在这里调用setRouteHooks注册路由钩子
    setRouteHooks(router);
}

后续增加页面

经过上面的步骤,路由就已经接入完成,后续增加路由只需要做两件事,如下

  • 新增页面组件
  • router/routes里面配置这个页面组件对应的路由

总结

其实给vue项目接入路由总结起来就是如下几步

  • 创建VueRouter实例
  • 创建路由表
  • 通过app.use(router)router-view给页面使用路由