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)/*

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

1 个答案: