Nuxt.js基础

一：Nuxt.js是什么

1. 一个基于Vue.js生态的第三方开源服务端渲染应用框架
2. 它可以帮助我们轻松的使用Vue.js技术构建应用

二：初始化Nuxt.js项目

方式一 : 命令一键创建

1. 使用 create-nuxt-app

方式二：手动创建

1. npm init -y

2. npm i nuxt

3. 创建page目录

4. 在page目录里面创建index.vue文件

5. 运行项目  npm  run dev

三：Nuxt.js-路由-基本路由

四：Nuxt.js-路由-路由导航

1. a标签会刷新整个页面，不要使用
2. nuxt-link组件和router-link一样
3. 编程式导航  this.$router.push()

五：Nuxt.js-路由-动态路由

1. 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或者目录

六：Nuxt.js-路由-嵌套路由

1. 创建内嵌套子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录原来存放子视图组件
2. 需要在父路由页面写一个子路由出口

七：Nuxt.js-路由-自定义路由配置

1. 创建nuxt.config.js进行配置
2. base：应用的根URL。如果整个单页面应用的所有资源可以通过/app/ 来访问，那么base配置项的值需要设置为 ‘/app/’
3. routeNameSplitter：你可能希望更改 Nuxt.js 使用的路由名称之间的分隔符。你可以通过配置文件中的routeNameSplitter选项执行此操作
4. extendRoutes：你可能希望扩展Nuxt.js创建的路由。你可以通过extendRoutes选项执行此操作。例如自定义路由
5. linkActiveClass：全局配置默认的激活类名
6. linkExactActiveClass：全局配置默认的active class
7. linkPrefetchedClass：全局配置默认值(默认情况下禁用功能)
8. middleware：为应用的每个页面设置默认的中间件
9. mode：配置路由的模式，鉴于服务端渲染的特性，不建议修改该配置
10. scrollBehavior：配置项用于个性化配置跳转至目标页面后的页面滚动位置。每次页面渲染后都会调用 scrollBehavior 配置的方法
11. parseQuery / stringfiyQuery：提供自定义查询字符串解析/字符串化功能。覆盖默认值
12. prefetchLinks：要全局禁用所有链接的预取，要禁用特定链接上的预取，可以使用ni-prefetch 属性
13. fallback：当浏览器不支持 history.pushState但模式设置为 history 时，控制路由器是否后回退

八：Nuxt.js-视图-模板

九：Nuxt.js-视图-布局

1. Nuxt.js 允许你扩展默认的布局，或在 layout 目录下创建自定义的布局
2. 可以提供添加 layouts/default.vue 文件来扩展应用的默认布局
3. 提示：别忘记在布局文件中添加 组件用于显示页面的主体内容
4. 可以使用layout 属性设置页面默认的布局组件

十：Nuxt.js-异步数据

1. Nuxt.js  扩展了 Vue.js  增加了一个叫  asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。
2. 当你想要动态页面内容有利于 SEO 或者是提升首屏渲染速度的时候，就在 asyncData中发送请求拿数据

基本用法

1. 它会将asyncData返回的数据融合组件data方法返回数据一并给组件
2. 调用时机：服务端渲染期间和客服端路由更新之前

注意事项

1. 只能在页面组件中使用(页面，可用于组件传值)
2. 没有this，因为它是在组件初始化之前被调用

十一：Nuxt.js-异步数据-上下文对象

1. 可通过 API  context 来了解该对象的所有属性和方法
2. 可以使用注入asyncData 属性的 context对象来访问动态路由数据

十二：Nuxt.js-自定义路由规则

1. 使用extendRoutes

十三：Nuxt.js-登录状态持久化

十四：Nuxt.js-中间件

expore default function ({ store, redirect }) {
// store 这个是 vuex 的容器对象
// redirect 重定向方法
// 如果容器里面没有user  则跳转登陆页面
if(!store.state.user){
  return redirect('/login')
}
}
复制代码

十五：Nuxt.js-watchQuery属性

1. 使用watchQuery属性可以监听参数字符串的更改。 如果定义的字符串发生变化，将调用所有组件方法(asyncData, fetch, validate, layout, …)。 为了提高性能，默认情况下禁用。

2. 如果您要为所有参数字符串设置监听， 请设置：watchQuery: true

十六：Nuxt.js-插件

十七：Nuxt.js-设置页面meta优化SEO