I want to create a root localhost:3000/ip/{any IPv4 possible}
that’s my index.ts (router file looks like)

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(\d{1,3}\.\d{1,3}\.\d{1,3}\.)',
        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;

IPView.vue:

<template>
  <div>
    <h1>IP View</h1>
    <p v-if="isValidIP">IP Address: {{ ip }}</p>
  </div>
</template>

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

When accessing localhost:3000/ip/34.7.8.3 I get the error (This localhost page can’t be found. HTTP ERROR 404 ) but when localhost:3000/ip/54jjk45 I get the 404 ErrorView page.

What am I doing wrong?