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

Question

我想替换if的名称之一params是一个特定的名称，但我不知道为什么这不起作用。toto

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();
}

我究竟做错了什么？

标签： vue.jsvue-routerinfinite-loop

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)等于名称，则它尚未编码，您可以继续对其进行编码。