Nuxt.js 概述和使用

1. SPA（single page web application）单页 Web 应用，Web 不再是一张张页面，而是一个整体的应用，一个由路由系统、数据系统、页面（组件）系统等等，组成的应用程序。
2. 我们之前学习的Vue就是SPA中的佼佼者。
3. SPA 应用广泛用于对SEO要求不高的场景中
   

创建项目

目录结构

目录名称	描述
assets	资源目录，用于存放需要编译的静态资源。例如：LESS、SASS等 默认情况下，Nuxt使用Webpack若干加载器处理目录中的文件
components	vue组件目录，Nuxt.js 不会增强该目录，及不支持SSR
layouts	布局组件目录
pages	页面目录，所有的vue视图，nuxt根据目录结构自动生成对应的路由。
plugins	插件目录
static	静态文件目录，不需要编译的文件
store	vuex目录
nuxt.config.js	nuxt个性化配置文件，内容将覆盖默认
package.json	项目配置文件

路由概述

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

基础路由

• 自动生成基础路由规则
  

情况1：访问路径，由pages目录资源的名称组成（目录名称、文件的名称）
  - 资源位置： ~/pages/user/one.vue
  - 访问路径：http://localhost:3000/user/one


情况2：每一个目录下，都有一个默认文件 index.vue
  - 资源位置： ~/pages/user/index.vue
  - 访问路径：http://localhost:3000/user

动态路由

路由中路径匹配	组件位置及其名称
/	pages/index.vue
/user/:id	pages/user/_id.vue
/:slug	pages/_slug/index.vue
/:slug/comments	pages/_slug/comments.vue

实例

<template>
  <div>
    查询详情 {{this.$route.params.id}}
  </div>
</template>

<script>
export default {
  transition: 'test',
  mounted() {
    console.info(this.$route)
  },
}
</script>

<style>

</style>