Nuxt.js 基本使用

介绍

官网介绍：Nuxt.js 是一个基于 Vue.js 的通用应用框架，通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染，我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js，Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置，除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。
我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一步。
作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等

使用

安装

npm i nuxt

路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
要在页面之间使用路由，我们建议使用 标签。

<template>
  <nuxt-link to="/">首页</nuxt-link>
</template>

假设 pages 的目录结构如下：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么，Nuxt.js 自动生成的路由配置如下：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

nuxt.js 路由导航

1. a标签 它会刷新整个页面 不要使用.

 <!-- a 链接跳转会使页面刷新 走服务端渲染-->
 <a href="/">去首页</a>

2. nuxt-link 组件

 <!-- router-link 导航链接-->
 <p>router-link跳转</p>
 <router-link to="/">去首页</router-link>

3. 编程式导航

 <!-- 编程式导航跳转-->
 <p>编程式导航跳转</p>
 <button @click="goHome">编程式导航</button>
export default {
  name: "AboutPage",
  methods:{
     goHome(){
         this.$router.push('/')
     } 
  }
};

动态路由

可以使用_.vue动态匹配嵌套路径。

通过_.vue 来创建动态路由，上图 1 就代表 user 下的 id 动态路由，我们访问 user 路径的时候可以直接传递 id，使用 id 可以用 $route.params.id 来获取。

嵌套路由

可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由,创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件,
• Warning: 别忘了在父组件(.vue文件) 内增加 用于显示子视图内容。
假设文件结构如：

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

Nuxt.js 自动生成的路由配置如下：

router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}

自定义路由

配置基础路径信息
nuxt 的配置文件在 nuxt.config.js 中配置

// nuxt.js 的配置文件
module.exports = {
    router: {
        // 配置页面的基本路径
        base: '/abc',
    }
}

extendRoutes

您可能希望扩展Nuxt.js创建的路由。您可以通过extendRoutes选项执行此操作。
添加自定义路由:
比如我们想添加一个 /hello 的路径 让他也指向 about 模板的内容的时候，我们可以进行如下配置

// nuxt.js 的配置文件
module.exports = {
    router: {
        // 配置页面的基本路径
        base: '/abc',
        // routes 路由配置表
        // resolve 解析路由模板
        extendRoutes(routes, resolve) {
            routes.push({
                name: 'hello',
                path: '/hello',
                component: resolve(__dirname, 'pages/about.vue')
            })
        }
    }
}

asyncData

你可能想要在服务器端获取并渲染数据。Nuxt.js 添加了asyncData方法使得你能够在渲染组件之前异步获取数据。
asyncData方法会在组件（限于页面组件:在 pages 目录下面的组件使用）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据并返回给当前组件
asyncdata 中返回的数据可以和 data 中返回的数据一样的使用，只是它里面的数据是在服务端进行渲染的

<template>
  <div>
    <span>asyncData:</span>{{project}}
  </div>
</template>
<script>
export default {
  name: "AboutPage",
  asyncData(context) {
    return { project: 'nuxt' }
  },
};
</script
<style>
</style>

注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

总结

如果想要动态页面内容有利于 SEO ，或者是提升首屏渲染速度的话就在 asyncData 中拿数据，如果是非异步数据或者是普通数据则在正常的 data 中初始话数据即可
他们两则的数据最终会合并到一起