vue3.0+vite+typescript项目架构搭建之路由配置

vue3.0+vite+typescript项目架构搭建之路由配置

项目路由目录结构

为了路由文件更好的管理，以模块进行路由文件划分。

1.创建路由主文件index.ts

    路由分2种模式，根据需要进行选择： 

 createWebHashHistory hash模式

createWebHistory History模式

/**
 * @description 路由配置文件
 * @author : lsx
 * @version : v1.0
 * @date : 2020/10/22 14:04
 */
// import VueRouter from "vue-router";
import {createRouter, createWebHashHistory, createWebHistory, RouterOptions} from "vue-router";
import {setPageTitle} from "./setPageTitle";
import {setRouterBefore} from "./routerBefore";

import sign from "./module/sign";
import home from "./module/home";
import admin from "/@/router/module/admin";

const routes: any = [
    ...admin,
    ...sign,
    ...home
];
// Vue-router新版本中，需要使用createRouter来创建路由
/**
 * createWebHashHistory hash模式
 * createWebHistory History模式
 */
const router = createRouter({
    history: createWebHashHistory(),
    routes
} as RouterOptions);

setRouterBefore(router);

router.afterEach(() => {
    // console.log("路由切换了");
});

setPageTitle(router);

export default router;

2.创建routerBefore.ts进行路由跳转处理

/**
 * @description 路由跳转前处理
 * @author : lsx
 * @version : v1.0
 * @date : 2020/12/14 9:04
 */
import type {Router} from "vue-router";
import {getToken, goLogin} from "../utils/common";
import Util from "/@/utils/util";
/*路由跳转前登录检验*/
export const setRouterBefore = (router: Router) => {
    router.beforeEach(async (to) => {
        // console.log(to);
        if (to.fullPath !== "/sign/login" && Util.isEmpty(getToken())) {
            goLogin();
            return;
        }
        return true;
    });
};

3.创建setPageTitle.ts进行设置页面标题

import type {Router} from "vue-router";

/**
 * 设置页面标题
 * @param {*} title  :页面标题
 */
const setDocumentTitle = (title: string) => {
    document.title = title;
    const ua = navigator.userAgent;
    // console.log(ua);
    const regex = /\bMicroMessenger\/([\d.]+)/;
    // 兼容
    if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
        const i = document.createElement("iframe");
        i.src = "/favicon.ico";
        i.style.display = "none";
        i.onload = () => {
            setTimeout(() => {
                i.remove();
            }, 9);
        };
        document.body.appendChild(i);
    }
};
export const setPageTitle = (router: Router) => {
    router.beforeEach(async (to) => {
        setTimeout(() => {
            const title = "stars管理系统";
            if (to.meta.title) {
                const _title = to.meta.title ? ` ${to.meta.title}-${title} ` : `${title}`;
                setDocumentTitle(_title);
            }
        }, 30);
        return true;
    });
};

以上为项目路由的基本配置。