一起学下nuxt.js（上）

Nuxt.js通用 vue.jsSSR

SSR：服务器端 VUE渲染成HTML返回浏览器

SEO：VUE SPA（单页）新闻搜索引擎

比较SPA加载较快

因为新闻博客都需要搜索引擎抓取内容，大量的流量来自于服务器端的渲染如果使用vue制作该类网站的话那么有可能只能抓取到首页，那么我们就需要使用服务器端端的渲染SSR来进行网站的搭建。以前的J2EE和PHP也是服务器端渲染但是后来因为大前端的趋势SPA势不可挡所以就将前端拆开。

     

安装nuxt.js 

Nuxt的目录结构

在package.json可以配置端口等在nuxt.config.js可以配置全局的一些配置上面有一页meta标签啊，link小图标和reset全局的css样式，当然也可以配置webpack的打包配置包括一些将图片打包在一个固定的目录下等等操作。

css:['~assets/css/reset.css'],

这个是一个加载css的代码，波浪线代表跟目录以后会经常用到这种别名。

 路由

       关于nuxt的路由是框架封装好的，他会根据你的目录路径自动生成下面看一下我们的写法：

首先在默认pages下面的index.vue文件进行修改

我们的目录的结构是这样的，当然根据nuxt的官网并不推荐a标签来写而是使用nuxt-link的组件类似于router-link并且可以传递参数到路由页面例子如下

这种写法可以将该页面的参数传递到路由的页面，在这个页面可以接收到这个参数，在写VUE页面中会经常有这样的需求，比如你需要点击进入一个新闻页面，需要获取这个新闻页面的id然后通过这个ID去后台获取这个新闻的相关数据进行渲染。

下面讲一下动态路由

       动态路由可以说是一个常用的东西，首先你需要写一个以下划线加参数名称为命名方式的文件_id然后这里面写入新闻的内容页结构和代码如下

下面是主页面上面是内容页

可以发现我在内容页写了一个validate的函数这个函数接受了路由的参数params我们需要验证params的id的内容比如如果是全部为数据的话就可以正常跳转，就需要return出这个正则表达式，可以发现我洗了两个新闻页的跳转，一个写的id是123另一个写的是jackyfgh那么123的可以正常接收并跳转另一个页面会跳转到nuxt准备好的404页面。

如下图所示：

      

404页面

正常的页面