1

我有这个路线定义：

{name: "article", path: "/article/:id", component: Article, props: true}

还有这个组件（我使用 Typescript 和 vue-class-component）：

@Component({
    props: {
        id: Number
    }
})
class Article extends Vue {
    id: Number;
}

当然，这给了我这个警告

[Vue warn]: Invalid prop: type check failed for prop "id". Expected Number, got String.

所以我用道具功能更新我的路线定义

name: "article", 
path: "/article/:id", 
component: Article, 
props:(route:Route) => {
    const id = parseInt(route.params.id);

    if(isNaN(id))
        throw new Error("id param should be a number")

    return {id}
}

这行得通，但如果他给我一个“坏”的 id 参数值（例如“/article/toto”），我找不到如何将用户重定向到特定页面

router.onError 似乎在这里不起作用

导航守卫，在哪里可以使用 next(error) can't modify params/props

有人知道吗？

4

1 回答 1

0

URL 参数中的所有值都是type String.

在您的组件中，为此特定属性设置监视

props : ["id"],
watch : {
    id(current,previous){
      var reg = /^\d+$/;
      if(reg.test(current)){
        console.log("its a number");
      }
      else{
        console.log("its not a number");
        this.$router.push("/error"); //HomeComponent or ErrorComponent
      }
    }
  }

现在设置好手表后，您可以使用正则表达式检查 prop 中的当前值是否为 Number 或 String 类型。

if currentValue is Number then 
    GoAhead
if currentValue is NAN then 
    Redirect to HomeComponent or ErrorComponent
于 2018-01-15T07:23:26.320 回答