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

站长

2022年12月09日 16:16 · 阅读数 46

这是大厂企业级项目架构系列的第四篇，这系列的文章如下：

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

对于现在的应用，路由基本上是必不可少的，因为我们本次的工程使用的是Vue，而VueRouter是Vue的官方路由，与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给页面使用路由

文章推荐：

转载自:https://juejin.cn/post/7133181634404155423