nuxt入门教程（二）nuxt目录介绍和路由

目录结构介绍

---

当我们初始化项目以后，会发现nuxt的项目是如下结构的。

└─my-nuxt-demo
  ├─.nuxt               // Nuxt自动生成，临时的用于编辑的文件，build
  ├─assets              // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中
  ├─components          // 用于自己编写的Vue组件，比如日历组件、分页组件
  ├─layouts             // 布局目录，用于组织应用的布局组件，不可更改
  ├─middleware          // 用于存放中间件
  ├─node_modules
  ├─pages               // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置，文件名不可更改
  ├─plugins             // 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  ├─static              // 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。
  └─store               // 用于组织应用的Vuex 状态管理。文件夹名不可更改。
  ├─.editorconfig       // 开发工具格式配置
  ├─.eslintrc.js        // ESLint的配置文件，用于检查代码格式
  ├─.gitignore          // 配置git忽略文件
  ├─nuxt.config.js      // 用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。文件名不可更改。
  ├─package-lock.json   // npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作
  ├─package.json        // npm 包管理配置文件
  ├─README.md

先从路由开始

---

有很多同学肯定会比较惊讶，为什么路由这么重要的东西，不单独开一章来讲解，是的，因为nuxt的路由使用方法跟vue几乎是一摸一样的。

但是，它不需要你手动打开route去编写，而是根据你pages文件夹中的页面自动生成路由。是不是特别神奇？

跳转页面/路由

---

这里我们要讲一下seo收录，你千万千万，不要用js去跳转路由。因为js的跳转，爬虫是分析不到的。
如果你需要做页面的跳转，请使用nuxt-link标签。

<nuxt-link :to="{name:'article-id',params:{id:item.id}}">
    {{item.title}}
    <span>发布日期：{{item.time}} </span>
</nuxt-link>

nuxt-link会自动生成一个a标记，爬虫只会通过a标记去爬取你的页面，爬虫不会去分析你的js到底是干什么的。

正确的a标记，浏览器底部会显示链接地址

如图：当你有了a标记以后，爬虫会访问这个目录，并且尝试访问下面的index.html。
nuxt静态化的同时会帮助你生成这个目录，并且会在下面静态化一个index.html文件，一定切记不要使用js去跳转！！！

注意这里面有坑

---

你千万不照抄网上写的那些跳转方法。因为肯定是错的。nuxt会自动生成路由。
如果你在一些特殊的地方需要使用js跳转，请使用以下的方法：

js带参数跳转

this.$router.push({
    name: 'list-id',
    params:{id:1},
})

接收页面方法

this.$route.params

动态路由

---

注意：如果你创建的是需要接收参数的页面
你需要创建成，前面带_ 线的名字例如说这样：

路由中的.vue文件需要加_号

接着，最坑的地方出来了，因为他这个路由是自动生成的，你需要打开.nuxt文件夹
找到里面的route.js

查看你的route名称是否正确

看一下这个跳转的名字，你就知道是往哪里跳转了。