Nuxt的动态路由和参数校验
其实动态路由就是带参数的路由。比如我们现在新闻模块下面有很多新闻详情页,这时候就需要动态路由的帮助了。新闻详细页面我们在news文件夹下面新建了_id.vue的文件,以下划线为前缀的Vue文件就是动态路由,然后在文件里边有$route.params.id来接收参数。/pages/news/_id.vue<template><div>...
·
其实动态路由就是带参数的路由。比如我们现在新闻模块下面有很多新闻详情页,这时候就需要动态路由的帮助了。
新闻详细页面
我们在news文件夹下面新建了_id.vue的文件,以下划线为前缀的Vue文件就是动态路由,然后在文件里边有$route.params.id来接收参数。
/pages/news/_id.vue
<template>
<div>
<h2>News-Content{{$route.params.id}}</h2>
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
</template>
修改新闻首页路由
我们在/pages/news/index.vue进行修改,增加两个详细页的路由News-1和News-2.
<template>
<div>
<h2>News Index page</h2>
<p>NewID:{{$route.params.newsId}}</p>
<ul>
<li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
<li><a href="/news/123">News-1</a></li>
<li><a href="/news/456">News-2</a></li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
动态参数校验
进入一个页面,对参数传递的正确性校验是必须的,Nuxt.js也贴心的为我们准备了校验方法validate()。
/pages/news/_id.vue
<template>
<div>
<h2>News-Content{{$route.params.id}}</h2>
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
</template>
<script>
export default {
validate({params}){
// Must be a number
return /^\d+$/.test(params.id)
}
}
</script>
/pages/news/index.vue
<template>
<div>
<h2>News Index page</h2>
<p>NewID:{{$route.params.newsId}}</p>
<ul>
<li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
<li><a href="/news/123">News-1</a></li>
<li><a href="/news/a">News-2</a></li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
我们使用了validate方法,并把params传递进去,然后用正则进行了校验,如果正则返回了true正常进入页面,如果返回false进入404页面。
更多推荐
已为社区贡献18条内容
所有评论(0)