2024-07-18 給vue專案新增自定義路由守衛

叶乘风發表於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即可，要配置什麼任君決定。

相關文章