01-nuxt使用一

1.全局安装：

 初始化项目

 然后根据提示一步步走，cd 到创建的项目文件夹中

---

2.文件目录介绍

---

 3.路由规则：

index对应的是 localhost:3000, pages对应的就是一个 "/"

 写入文件夹： 如果想写成：localhost:3000/student，要把student文件夹中的student.vue 改成index.vue

 

---

 4.路由跳转：

nuxt-link 等同于 router-link，也可以用编程式导航

 注意：

---

 5.动态路由

 详情页取到动态ID，$route.params.id 这个id对应加了下划线的文件夹名字（_id）

 记住：一个文件目录对应着一个path，也就是文件夹名字就是path，文件夹中放index.vue

---

 6.动态路由参数校验

 

我们其实想要id作为动态路由参数，也去显示这是xx号学生的详细信息，所以我们要对路由参数做校验：

Nuxt.js 可以让你在动态路由对应的页面组件中配置一个`validate`方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。

 

 

我们打印的console.log(obj)不是在浏览器的控制台看的，而是在node服务(nuxt服务)中打印出来的（Vscode中）

---

 7.嵌套路由

 怎么做呢？具体步骤：

第一步：新建一个teacher.vue文件

第二步：新建一个teacher的文件夹（文件夹名字必须与组件名字一致）

第三步：在teacher文件夹中新建_id的文件夹

第四步：在_id文件夹中的index.vue中（详情页，动态路由对应的）编写我们的内容

第五步：在teacher.vue（父路由）中增加一个显示子路由的显示容器

 效果：

---