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

标签：must   准备   文件夹   参数   一个   页面   span   进入   dex   

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

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

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

<a href="/commodity/123">commodity1</a>

<nuxt-link to="/commodity/123">commodity2</nuxt-link>

<nuxt-link :to="{name: ‘commodity‘,params:{id: 123}}">commodity3</nuxt-link>  (推荐这种写法)

_id.vue：

<h2>commodity-Content [{{$route.params.id}}]</h2>

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

_id.vue：

export default {

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

}

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

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

标签：must   准备   文件夹   参数   一个   页面   span   进入   dex   

原文地址：https://www.cnblogs.com/hspl/p/12369861.html