Customising URL paths using Navigation Guards

I have an application with two pages.

Page one:

<form>
    <input pattern="\d*" maxlength="4" v-model="id" required>
    <router-link :to="`/${id}`">
       <div @click="info">GET</div>
    </router-link>
</form>

Using ('0000' + this.id).slice(-4), I am able to transfer 4 digits to 2nd page with desired URL like:

• input:1, navigated to: http://127.0.0.1:3000/0001
• input:321 => navigated to: http://127.0.0.1:3000/0321

Note: At the moment, I can pass the letters also because I am not validating

My question is how to use the next({path: ''}) Navigation Guards. I want the following to happen:

• input:http://127.0.0.1:3000/1, automatically redirected as: http://127.0.0.1:3000/0001
• input:http://127.0.0.1:3000/99, automatically redirected as: http://127.0.0.1:3000/0099

I tried using beforeEnter, but I think I am missing some things. This is my route.js file.

const routes=[
    {
        name:'Info',
        path:'/:id',
        component: Info,
        beforeEnter: (to, from, next) => {     
            to.params.myCustomizations = {
                id_num: ('0000' + to.params.id).slice(-4)     
            }
            next({path: `/${to.params.myCustomizations}`})
          },
    },
];

I would appreciate any help you can provide.