Nuxt.js 路由限制了可能的参数选项

Question

我的 Nuxt.js 应用程序中有以下 url 结构。

/pages/_wildcard/_id.vue

基本对应example.com/*/*

我正在寻找一种仅在访问特定参数时触发该页面的方法。

例如，我想只允许clothes、electronics 和babies 作为可能的通配符值对应

• example.com/clothes/*
• example.com/electronics/*
• example.com/babies/*

除了他们三个以外的任何东西都不应该进入这个页面。

出现问题是因为第一个参数是通配符。我正在寻找一种只允许在路由中使用特定通配符值的方法。有这样的吗？

我唯一想到的是在 asyncData 方法中有一个 if 语句来进行验证，但我想避免这种情况。在这里寻找更好的解决方案。

Answer 1

Vue-router 有很棒的dynamic redirects / 检查方式：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // the function receives the target route as the argument
      // return redirect path/location here.
    }}
  ]
})

您可以将路由检查放入此函数并执行任何需要的验证。

或者...您可以使用Vue-router reg-exp 的全部功能并像这样在 router.js 中编写您的路径：

/(clothes|electronics|babies)/*