技術標籤：vue3.0路由vuetypescript

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;
    });
};
 

以上為專案路由的基本配置。