Nuxt.js 入门到实战多参数中间件插件异步获取数据

本文链接：https://blog.csdn.net/qq_41387882/article/details/106294485

Nuxt.js

Vue提供了服务端渲染及还能支撑spa单页功能的框架。Nuxt.js 主要关注的是应⽤的 UI渲染。功能强大，方便我们快速上手。开箱即用。特点：

模块化
高效快速
开发体验
静态⽂件服务 & 强大路由功能

安装: Nuxt模板项目官方推荐 npx 这样会安装最新模板。然后进入项目。运行

npx create-nuxt-app <项目名>
cd <项目名>
npm run dev

然后选择你自己需要的插件依赖，不知道可以一直选默认；

整体项目目录结构

assets:资源目录assets
用于组织未编译的静态资源如LESS、SASS 或JavaScript。
components:组件目录components 用于组织应用的Vue.js组件。Nuxt.js 不会扩展增强该目
录下Vue.js组件，即这些组件不会像页面组件那样有asyncData 方法的特性。
layouts:布局目录layouts 用于组织应用的布局组件。
middleware:中间件目录用于存放应用的中间件。
pages:页面目录
pages用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的. vue
文件并自动生成对应的路由配置。
plugins:插件目录plugins 用于组织那些需要在根vue. js应用实例化之前需要运行的
Javascript插件。
static:静态文件目录
static用于存放应用的静态文件，此类文件不会被Nuxt,js调用Webpack
进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径/下。
store:用于组织应用的Vuex状态树文件。Nuxt.js 框架集成了Vuex状态树的相关功能配置，
在store目录下创建一个index. js |文件可激活这些配置。
nuxt.config.js:该文件用于个性化配置Nuxt应用。

路由

路由自动生成

page 文件中的路由 .vue 文件。可以自动生成以文件名为路由名生成。特高效率

page/user.vue => http://localhost:3000/user 则生成这样目录

检查生成的路由配置，在.next 文件中 router.js。
嵌套路由

Nuxt 中在page目录下得出现 .vue 同名的文件才能出发嵌套利用。不然你在 page中创建其他文件，在文件中创建其他 .vue 文件事，只能生成路径的嵌套。
- 错误示范：目录：/page/user/getUserInfo.vue => http://localhost:3000/user/getUserInfo
  
  路径看上去可以，可是去路由配置看发现getUserInfo路由和user是同级路由。
- 正确写法：
  1. 在page创建父页面：如 user.vue
  2. 在父页面 user.vue 中使用 nuxt-child 标签。他类似 router-view
  3. page创建包裹子路由的文件夹，且父亲同名：page/user
  4. 比如：创建子路由用户个人信息。page/user/userOne.vue => localhost:3000/user/userOne
文件中可以继续创建文件，继续多级嵌套路由。方法同理
路由传参

路径跳转给下一个页面传递参数。

_id.vue { { $route.parmas.id }} =》 /user/99 则99就是id参数
- 多参数传值：需要继续嵌套文件。例如：继续嵌套更新 /user/id/name 。这样想id和name做参数，步骤
- 1创建_id.vue 并在页面使用 nuxt-child 标签
- 2创建**_id** 文件夹在文件内创建_name.vue
- 3在_id.vue 和 _name.vue 都可以使用 $route.parmas 查看参数了
路由跳转

nuxt-link 标签. 和roter-link 用法一样。指定的页面默认预加载。提供良好的体验

如果不想预加载销毁第一资源，可以使用 no-prefetch 取消。点击页面才去加载。

自定义路由配置

如果Nuxt默认生成利用方式不满足自己开发。那么你可以在 nuxt.config.js 中修改。如替换默认别名。参数，传参方式等等…

//router 自定义路由配置 满足自己需要
  router: {
     
     
    extendRoutes(routes, resolve) {
     
     
      routes.push({
     
     
        path: '/foo', //替换默认 也可访问foo,就可以访问hzfFoo.vue
        component: resolve(__dirname, 'pages/hzfFoo.vue');
      })
    },
  },

layout 全局布局

Nuxt默认布局是 default.vue。如果你希望你的登录注册也，和后台页区分开，可以自己定义登录布局

自定义布局

定义布局 login.vue

<template>
  <div>
    欢迎登录 登录
       
    <!-- page文件中所有页面 -->
    <nuxt />
  </div>
</template>

使用自定义布局

export default {
   
   
    layout: 'login',
    ...
}

捕获错误布局页

在layout中定义 error.vue

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <p>{
    
    {error}}</p>
    <nuxt-link to="/">首 页</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blank'
}
</script>