Nuxtjs初学习

最新推荐文章于 2024-09-27 15:22:09 发布

晟松

最新推荐文章于 2024-09-27 15:22:09 发布

阅读量1.5k

点赞数

分类专栏：学习日记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43977818/article/details/113914915

版权

本文是Nuxt.js初学者的学习笔记，主要探讨了Nuxt.js的目录结构、路由配置（包括普通、动态、嵌套路由和中间件）、视图操作、异步数据处理、以及数据交互中的axios配置和Vuex的使用。通过Nuxt.js，可以实现SEO优化和更好的用户体验。

摘要由CSDN通过智能技术生成

Nuxtjs初学习

怎么说啦，学这个主要是为了解决seo的问题，使用服务端渲染，给用户更好的体验

官网

一位大佬的简单教程

B站视频教程

注意上面的beforecreated和created两个钩子，这两个钩子既可以跑在服务端，也可以跑在客户端。有一个验证就是，使用console，服务端的会再终端里面打印出来，而客户端的会在浏览器的控制台打印出来

剩下的其他部分就是vue自己的其他生命周期钩子了，如mounted这些

在服务器端的钩子不能访问客户端的对象，如window对象，只能获取到服务器的上下文context

nuxtServerInit ：这个初始化方法可自定义。写在这个vuex里面主模块的 store的actions里面，起nuxtServerInit这个名字，服务器在初始化的时候就会自动调用这个函数进行初始化

目录结构

Nuxt自动生产了项目目录，我们先来一个一个介绍一下。

|-- .nuxt                            // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets                           // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components                       // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
|-- layouts                          // 布局目录，用于组织应用的布局组件，相当于vue里的app.vue文件
|-- middleware                       // 用于存放中间件，相当于路由守卫这种
|-- pages                            // 用于存放写的页面，我们主要的工作区域
|-- plugins                          // 用于存放JavaScript插件的地方
|-- static                           // 用于存放静态资源文件，比如图片
|-- store                            // 用于组织应用的Vuex 状态管理。
|-- .editorconfig                    // 开发工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件，用于检查代码格式
|-- .gitignore                       // 配置git不上传的文件
|-- nuxt.config.json                 // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json                     // npm包管理配置文件

路由

感觉这里有一些特别，跟普通的vue比没了显式的vue-router的目录和文件，Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。可以在执行nuxt命令后在 .nuxt 目录里面的router.js文件里面看见生成的路由

路由可对全部页面使用过渡效果。也可单独对某一个页面使用过渡效果（这个需要使用页面组件的transition属性）

全局的直接在一个css文件里面以page开头写动画效果，然后在nuxt.config.js里面的css属性里面引入，nuxt会自动将这个效果应用到全部的页面切换，这也是nuxt约定式的一个体现

进入和离开的active动画一般写在一起，刚进入的状态和最后退出后的状态一般写在一起

/* 这里是page页面全局的页面切换动画 */
.page-enter-active,
.page-leave-active {
   
  transition: all 0.5s;
}
.page-enter,
.page-leave-to {
   
  opacity: 0;
}

nuxt.config.js
css: [
    'element-ui/lib/theme-chalk/index.css',
	// 在这里引入
    'assets/main.css',
  ],

普通路由

假设 pages 的目录结构如下：

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

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

router: {
   
  routes: [
    {
   
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
   
      name: 'user',
      path: '/user', // index.vue文件就直接对应目录名的路由
      component: 'pages/user/index.vue'
    },
    {
   
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

动态路由

即是带参数的路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录。

目录结构：

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

Nuxt.js 生成对应的路由配置表为：

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

你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。

参数校验

Nuxt.js 可以让你在动态路由组件中定义参数校验方法。

举个例子： pages/users/_id.vue

export default {
   
  validate({
    params }) {
   
    // 必须是number类型
    return /^\d+$/.test(params.id)
  }
}

如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。

嵌套路由

可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

Warning: 别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。

假设文件结构如：

pages/
--| users/
	 # 这里就一个动态路由文件即可，不需要多个下划线开头的路由文件，反正最后一个url只会匹配一个动态路由文件
-----| _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.config.js layout pages （如果都使用了middleware的话）

每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称 (middleware/auth.js将成为 auth 中间件)。

一个中间件接收 context 作为第一个参数：

export default function (context) {
   
  context.userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent
}

中间件执行流程顺序：

nuxt.config.js
匹配布局
匹配页面

然后在你的 nuxt.config.js 、 layouts 或者 pages 中使用中间件:

nuxt.config.js

module.exports = {
   
  router: {
   
    middleware: 'auth'
  }
}

现在，auth 中间件将在每个路由改变时被调用。

您也可以将 middleware 添加到指定的布局或者页面:

注意：这里如果在上面的nuxt.config.js里面也添加了中间件的话，这两个中间件都会被调用

pages/index.vue` 或者 `layouts/default.vue

export default {
   
  middleware: 'auth'
}

还有一些其他的路由，但基本不用就不记录了

最后简单总结一下：

注意一下 index.vue 文件，会根据目录自动创建相应路由，

普通路由：直接在pages目录里面创建 a.vue 文件，会自动生成 /a 的路由，也可先创建一个目录，如目录名为ts，然后在目录里面创建 b.vue 文件，最后产生的路由为 /ts/b
动态路由：就是在带参数的路由，最主要的就是使用下划线开头命名**.vue**文件，也可以相似的命名目录，使得下划线开头的目录里面的 index.vue 也变成动态的，注意同一个目录里面的动态路由文件只能创建一个，因为url只会匹配到一个动态路由文件
嵌套路由：直接创建一个目录（如 ts），同时创建一个跟目录同名的ts.vue文件，在这个文件里面增加 <nuxt-child/> 用于显示子视图内容。然后在创建的目录里面新建 .vue 文件即可进行嵌套，生成的路由文件里面，这些目录里的文件就会在 /ts 路由的children属性中

最后一个示例

pages目录结构

.
├── _slug
│   ├── _e.vue
│   ├── d.vue
│   └── index.vue
├── index.vue
├── test.vue
├── ts
	#这里的两个动态路由文件其实只会根据顺序匹配到_b.vue文件，_c.vue根本无法用到
│   ├── _b.vue
│   ├── _c.vue
│   ├── a.vue
│   └── index.vue
└── ts.vue

生成的路由文件

// 这里的乱码是引入的视图文件的随机名字
routes: [{
   
    path: "/test",
    component: _1f67911e,
    name: "test"
  }, {
   
    path

最低0.47元/天解锁文章

晟松

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录