Nuxt.js开启SSR渲染的教程详解(4)

日期：2020-05-11 栏目：程序人生 浏览：次

 

（2）在news文件夹下的index.vue里用$route.params.newsId进行接收，代码如下。

<template>
 <div>
  <h2>News Index page</h2>
  <p>NewsID:{{$route.params.newsId}}</p>
  <ul>
  <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>

 

成功实现参数的传递。

 

第六节：Nuxt的动态路由和参数校验

1.动态路由，其实动态路由就是带参数的路由。比如我们现在新闻模块下面有很多新闻详细页，这时候就需要动态路由的帮助了。

（1）新闻详细页面： 我在news文件夹下面新建了_id.vue的文件，以下画线为前缀的Vue文件就是动态路由，然后在文件里边有 $route.params.id来接收参数。

/pages/news/_id.vue

<template>
 <div>
  <h2>News-Content [{{$route.params.id}}]</h2>
  <ul>
  <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>

 

（2）修改新闻首页路由

我们在/pages/news/index.vue进行修改，增加两个详细页的路由News-1和News-2。

 

<template>
 <div>
  <h2>News Index page</h2>
  <p>NewsID:{{$route.params.newsId}}</p>
  <ul>
  <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  <li><a href="/news/123" rel="external nofollow" >News-1</a></li>
  <li><a href="/news/456" rel="external nofollow" >News-2</a></li>
  </ul>
 </div>
</template>

代码写好后，打开npm run dev 进行查看，我们已经进入了新闻详细页，并在详细页中取得了传递过来的新闻id。

2.参数校验

进入一个页面，对参数传递的正确性校验是必须的，Nuxt.js也贴心的为我们准备了校验方法validate( )。

（1）在接受参数的页面添加

/pages/news/_id.vue

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

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