大前端学习 -- NuxtJS学习笔记

NuxtJS学习笔记

文章内容输出来源：大前端高薪训练营

代码仓库地址：https://gitee.com/jiailing/nuxtjs-demo，在多个分支里都有代码

一、Nuxt.js是什么

• 一个基于Vue.js生态的第三方开源服务端渲染应用框架
• 它可以帮我们轻松的使用Vue.js技术栈构建同构应用
• 官网：https://zh.nuxtjs.org/
• Github仓库：https://github.com/nuxt/nuxt.js

二、Nuxt.js的使用方式

• 初始化项目
• 已有的Node.js服务端项目
  • 直接把Nuxt当做一个中间件集成到Node Web Server中
• 现有的Vue.js项目
  • 非常熟悉Nuxt.js
  • 至少百分之10的代码改动

三、初始化Nuxt.js应用方式

官方文档：https://zh.nuxtjs.org/guide/installation

• 方式一：使用create-nuxt-app
• 方式二：手动创建

四、Nuxt.js路由

1. 基本路由

pages文件夹下的文件会自动生成路由

2. 路由导航

• a标签

  • 它会刷新整个页面，不推荐使用
  • <a href="/">首页</a>

• nuxt-link组件

  • https://router.vuejs.org/zh/api/#router-link-props
  • <router-link to="/">首页</router-link>

• 编程式导航

  • https://router.vuejs.org/zh/guide/essentials/navigation.html

  • <button @click="onClick">首页</button>

    methods: {
           
      onClick () {
           
        this.$router.push('/')
      }
    }
    

3. 动态路由

• Vue Router动态路由匹配
  • https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html
• Nuxt
  • https://zh.nuxtjs.org/guide/routing#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1

user/_id.vue，动态路由参数文件名由下划线开头。

<template>
  <div>
    <h1>User page</h1>
    <p>{
  {$route.params.id}}</p>
  </div>
</template>

<script>
export default {
    
  name: 'UserPage'
}
</script>

<style scoped>

</style>

4. 嵌套路由

• Vue Router 嵌套路由
  • https://router.vuejs.org/zh/guide/essentials/nested-routes.html
• Nuxt.js嵌套路由
  • https://zh.nuxtjs.org/guide/routing#%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1

可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

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

4. 路由配置

• 参考文档：https://zh.nuxtjs.org/api/configuration-router

• 在项目根目录下创建nuxt.config.js

  /**
   * Nuxt.js 配置文件 nuxt.config.js
   */
  
   module.exports = {
       
     router: {
       
       base: '/abc',
       // routes就是路由配置表，是个数组，resolve是解析路由路径的
       extendRoutes(routes, resolve) {
       
        routes.push({
       
          name: 'custom',
          path: