Nuxt配置动态路由以及参数校验

动态路由就是带参数的路由。比如我们商品列表里很多商品详细页，这时候就需要动态路由的帮助了。

比如我们新建一个commodity文件夹，新建一个index.vue 文件，然后新建一个_id.vue (以下画线为前缀的Vue文件就是动态路由，然后在文件里边有 $route.params.id来接收参数)

index.vue (可以写三种方式)：

"/commodity/123">commodity1

"/commodity/123">commodity2

"{name: 'commodity',params:{id: 123}}">commodity3  (推荐这种写法)

_id.vue：

commodity-Content [{{$route.params.id}}]

校验传递参数的正确性是很有必要的，Nuxt.js也贴心的为我们准备了校验方法validate( )。

_id.vue：

export default {

  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }

}

我们使用了validate方法，并把params传递进去，然后用正则进行了校验，如果正则返回了true正常进入页面，如果返回false进入404页面