Vue Router正则匹配IPv4路由异常：合法IP返回404问题排查

核心错误 #

你的路由规则里，path: '/ip/:ip(\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.)'这个正则要求IP参数必须以点结尾，但合法的IPv4地址（比如34.7.8.3）是没有结尾点的，导致这个路由完全匹配不上。而/ip/54jjk45能跳转到ErrorView，是因为它连宽松的格式都不符合，直接触发了通配符路由；但合法IP因为不满足第一个路由的奇怪规则，又没被通配符路由正确捕获（或服务器直接返回404）。

修复步骤 #

1. 修正路由配置 #

把第一个路由的path改成能捕获完整IP参数的规则，然后交给beforeEnter做合法性校验，逻辑更清晰：

import {createRouter, createWebHistory} from 'vue-router';
import IPView from "../views/IPView.vue";
import ErrorView from '../views/ErrorView.vue';
const router = createRouter({
    history: createWebHistory(),
    routes: [{
        // 匹配任意非斜杠字符，先捕获参数再校验
        path: '/ip/:ip([^/]+)',
        name: 'IPView',
        component: IPView,
        beforeEnter: (to, from, next) => {
            const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
            if (ipRegex.test(to.params.ip as string)) {
                next();
            } else {
                next({ name: 'error' });
            }
        }
    }, {
        path: '/:pathMatch(.*)*',
        name: 'error',
        component: ErrorView
    }]
});

export default router;

如果想在路由层面直接做严格匹配，也可以把path改成带完整IP正则的格式（可读性稍差）：

path: '/ip/:ip((?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))',

2. 完善IPView.vue的逻辑 #

当前组件未定义isValidIP和ip变量，补充后才能正常显示IP信息：

<template>
  <div>
    <h1>IP View</h1>
    <p>IP Address: {{ ip }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';

const route = useRoute();
const ip = ref('');

onMounted(() => {
  ip.value = route.params.ip as string;
});
</script>

额外说明 #

用[^/]+匹配参数是因为IP地址里不会包含斜杠，能确保捕获到完整的参数；之后通过beforeEnter里的正则校验合法性，这样不管参数合法与否，都会走Vue Router的逻辑，不会出现服务器返回的404。

内容的提问来源于stack exchange，提问作者Daniel