使用Navigation Guards自定义URL路径的实现问题

我有一个包含两个页面的应用：
第一页代码如下：

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

通过('0000' + this.id).slice(-4)，我可以将4位数字传递到第二页，得到期望的URL：

• 输入1，导航至：http://127.0.0.1:3000/0001
• 输入321，导航至：http://127.0.0.1:3000/0321

注意：目前未做验证，也可传入字母

我的需求是使用next({path: ''})形式的导航守卫实现：

• 输入URL http://127.0.0.1:3000/1，自动重定向至http://127.0.0.1:3000/0001
• 输入URL http://127.0.0.1:3000/99，自动重定向至http://127.0.0.1:3000/0099

我尝试使用beforeEnter但有问题，我的route.js代码如下：

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}`})
          },
    },
];

你的问题出在错误拼接了重定向路径，to.params.myCustomizations是一个对象，直接拼到路径里会变成/[object Object]，完全不符合预期。另外还需要加上输入合法性验证，避免字母等非法内容进入重定向逻辑。

修改后的beforeEnter逻辑如下：

const routes=[
    {
        name:'Info',
        path:'/:id',
        component: Info,
        beforeEnter: (to, from, next) => {
            // 先验证id是否为纯数字
            const id = to.params.id;
            if (!/^\d+$/.test(id)) {
                // 处理非法输入，比如重定向到首页或者报错页
                return next('/');
            }
            // 格式化id为4位补零的字符串
            const formattedId = ('0000' + id).slice(-4);
            // 如果当前id已经是格式化后的4位，直接放行
            if (id === formattedId) {
                return next();
            }
            // 否则重定向到格式化后的路径，replace: true替换历史记录避免后退循环
            next({ path: `/${formattedId}`, replace: true });
        },
    },
];

关键说明： #

1. 合法性验证：通过正则/^\d+$/检查参数是否为纯数字，避免字母等非法内容进入后续逻辑，可根据需求调整非法输入的处理方式（比如重定向首页）。
2. 格式化逻辑：沿用你之前的补零逻辑，但直接生成字符串形式的formattedId，避免对象拼接错误。
3. 避免无限重定向：增加判断，如果当前参数已经是4位格式化后的字符串，直接放行，防止进入无限重定向循环。
4. replace: true：添加该参数会让重定向操作替换当前浏览器历史记录，用户点击后退时不会回到未格式化的URL，提升体验。

另外，建议优化第一页的跳转逻辑，直接在跳转前就格式化id并做验证，避免前端跳转时出现未格式化的URL：

<form>
    <input pattern="\d*" maxlength="4" v-model="id" required>
    <router-link :to="formatId(id)">
       <div @click="info">GET</div>
    </router-link>
</form>

对应的Vue实例方法：

methods: {
    formatId(id) {
        if (!/^\d+$/.test(id)) {
            // 非法输入，返回首页或其他路径
            return '/';
        }
        return `/${('0000' + id).slice(-4)}`;
    }
}

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