2024-07-18 给vue项目添加自定义路由守卫

要配置路由守卫要使用到vue-router，它是 Vue.js 官方的路由管理器，主要用于帮助开发者构建单页面应用（Single Page Application，简称 SPA）。

步骤一：新建路由文件，文件名随意，建议叫router.ts，规范一点

// router.ts

import { createRouter, createWebHashHistory } from "vue-router";
import pages from "./pages/index";
import base from "./base"; // 状态页：401、403、404 etc

const routes = [...pages, ...base];

// 配置全局路由守卫
const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

// 全局前置守卫，监听路由变化
router.beforeEach((to, from, next) => {
    // 检查路由是否存在
    const isExists = router.getRoutes().some(route => route.path === to.path);

    // 不存在，则重定向到 404 页面
    if (!isExists) {
        next({ name: '404' });
    } else {
        next(); // 存在，则继续正常流程
    }
});

export default router;

给你看一下我的路由配置：

// base.ts

const base = [
    {
        path: '',
        name: '404',
        type: 1,
        children: [
            {
                path: '/404',
                name: '404',
                component: () => import("@/views/status/404.vue"),
            },
        ]
    },
];
export default base;

步骤二：配置main.ts（引入router配置，然后挂载）

// main.js
import { createApp } from 'vue';
import App from "./App.vue";
import "highlight.js/styles/color-brewer.css" // 引入高亮样式
import router from "./router";

const app = createApp(App);
app.use(router);
app.mount('#app');

步骤三：配置App.vue

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

那么，当你在页面输入的路径和你路由配置的路径不匹配时，就会自动跳转到指定页面，比如我是直接跳转到了404页面。

注意：虽然我标注的都是.ts文件，但是js也是一样能套用的，另外路由配置参考base.ts即可，要配置什么任君决定。