Nuxt服务端渲染

Nuxt的动态路由和参数校验参数校验 Nuxt的路由动画效果全局路由动画单独设置页面动效 params传递参数

Nuxt的动态路由和参数校验

（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="/">Home</a></li> </ul> </div> </template>

（2）修改新闻首页路由

我们在/pages/news/index.vue进行修改，增加两个详细页的路由News-1和News-2。 代码写好后，打开npm run dev 进行查看

参数校验

进入一个页面，对参数传递的正确性校验是必须的，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页面。

Nuxt的路由动画效果

路由的动画效果，也叫作页面的更换效果。Nuxt.js提供两种方法为路由提供动画效果，一种是全局的，一种是针对单独页面制作。

全局路由动画

(1.添加样式文件) /assets/css/normailze.css(没有请自行建立)

.page-enter-active, .page-leave-active { transition: opacity 2s; } .page-enter, .page-leave-active { opacity: 0; }

(2.文件配置) 然后在nuxt.config.js里加入一个全局的css文件就可以了。 css:[‘assets/css/main.css’],

<li><nuxt-link :to="{name:'news-id',params:{id:123}}">News-1</nuxt-link></li>

单独设置页面动效

想给一个页面单独设置特殊的效果时，我们只要在css里改变默认的page，然后在页面组件的配置中加入transition字段即可。例如，我们想给about页面加入一个字体放大然后缩小的效果，其他页面没有这个效果。

（1）在全局样式assets/main.css 中添加以下内容

.test-enter-active, .test-leave-active { transition: all 2s; font-size:12px; } .test-enter, .test-leave-active { opacity: 0; font-size:40px; }

（2）然后在about/index.vue组件中设置

export default { transition:'test' }

总结：在需要使用的页面导入即可。

params传递参数

路由经常需要传递参数，我们可以简单的使用params来进行传递参数，我们现在向新闻页面（news）传递个参数，然后在新闻页面进行简单的接收。

（1）我们先修改pages下的Index.vue文件，给新闻的跳转加上params参数，传递3306。

<template> <div> <ul> <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li> <li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li> <li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link></li> </ul> </div> </template> <script> export default { components: { } } </script> <style> </style>

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

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

注意：name其实指向的是路由（文件夹或文件名），而路由死活区分大小写的 ， 所以to后面区分大小写！！！建议文件夹都写成小写的。 链接: Nuxt框架服务器端渲染（一）. 链接: Nuxt框架服务端渲染(三).