vue-router 的 beforeEach 方法的无限循环

Question

如果to 的名称是特定名称，我想替换to 中的params 之一，但我不知道为什么这不起作用。

export const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
  routes: [
    {
      name: 'Details Page',
      path: 'details/:name/:id',
      component: () => import('@/views/Details.vue'),
      meta: {
        encode: true,
      },
    },
    // other routes... (none of them has encode = true)
  ]
});

function needsEncode(route) {
  return route.meta && route.meta.encode;
}

router.beforeEach(async (to, from, next) => {
  if (to.name === 'Details Page' && needsEncode(to)) {
    const toEncoded = Object.assign({}, to, {
      meta: {
        encode: false,
      },
      params: {
        name: encodeURIComponent(to.params.name),
        id: to.params.id,
     },
    });
    return next(toEncoded);
  }
  return next();
}

我做错了什么？

Answer 1

请不要将状态存储在 meta 属性中。相反，您可以检查名称是否已编码：

function needsEncode(route) {
  return route.meta && route.meta.encode && ( // <-- changes start here
    decodeURIComponent(to.params.name) === to.params.name
  ) // <-- changes ends here
}
router.beforeEach(async (to, from, next) => {
  if (to.name === 'Details Page' && needsEncode(to)) {
    const toEncoded = Object.assign({}, to, {
      // remove meta
      //meta: {
      //  encode: false,
      //},
      params: {
        name: encodeURIComponent(to.params.name),
        id: to.params.id,
     },
    });
    return next(toEncoded);
  }
  return next();
}

如果decodeURIComponent(to.params.name) 等于名称，则它尚未编码，您可以继续对其进行编码。