一起学下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页面


正常的页面

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值