nuxt的基础使用

nuxt 是用于解决 vue 服务端渲染+客户端渲染（同构渲染）的方法，他的内部集成了 vue、vue-router 等模块，可以让开发更加的方便

安装

新建一个文件夹，并移动到当前目录中

初始化项目 npm init -y

nuxt 的安装非常的简单，只需要安装 nuxt 模块即可

npm i nuxt

第一个页面

创建好项目和安装模块后，在项目根路径下创建 pages 目录，该目录将存放项目的所有页面。并在 pages 目录中新建一个 index.vue 文件。

启动项目

我们可以在 scripts 中配置脚本命令或者直接执行 npm run nuxt 即可运行项目

运行后的结果

然后我们打开 http://localhost:3000/ 就可以跳转到项目页面

那么在没有配置路由的情况下，nuxt 是如何找到我们的页面的呢？下面来看看

pages 目录

在 nuxt 中，所有的页面都将放在根路径下的 pages 目录中，每一个文件相当于一个页面。nuxt 会根据 pages 目录生产对应的路由配置。如下图：

这里有两个页面，index 和 about。最终会生成两个路径的路由配置：

[{ // index.vue
	path: '/',
	name: 'index',
	component: 'pages/index.vue'
}, { // about.vue
	path: '/about',
	name: 'about',
	component: 'pages/about.vue'
}]

在 pages 中 index 被视为 根路径。不难看出，页面的跳转还是通过 vue-router 来进行的，只是 nuxt 帮助我们将 pages 目录下的文件以一定形式的逻辑转换成 vue-router 的配置，不需要我们再次进行路由配置。

路由导航

我们知道 nuxt 中的路由实际就是 vue-router 实现的，所以路由跳转可以使用 router-link 进行跳转 或 编程式导航，但在 nuxt 中，它更推荐使用 nuxt-link 进行跳转。

nuxt-link

nuxt-link 本身只是对 router-link 进行了一次封装，在使用上其实与 router-link 是几乎相同的，所以这里就不细说了

<nuxt-link to="/about"></nuxt-link>
<nuxt-link :to="{path:'/about'}"></nuxt-link>

编程式导航

编程式导航其实就是通过 js 跳转路由，使用方式和 vue-router 是一样的，我们可以通过实例中的 $router 访问路由

<script>
export default {
  name: 'About',
  methods: {
    toHome() {
      this.$router.push('/')
    }
  }
}
</script>

动态路由

nuxt 中的动态路由定义方式和 vue-router 中还是有很大不同的，它主要还是通过命名 pages 目录来进行的，以往我们想要定义一个动态路由是通过 /user/:id 来实现的

vue-router

let router = [{
	path: '/user/:id',
	name: 'User',
	component: User
}]

nuxt

它配置了这样的一个目录
pages
–| user
----| _id.vue // 这个文件相当与动态路由 /user/:id
----| index.vue // 这个文件相对与 user 的根路径 /user/
–| about.vue
–| index.vue

核心思想和把 pages 下的目录作为路由名称，目录下的index作为该路由的根路径，其他则作为子路由，若文件名以 _ 开头则转换为动态路由

嵌套路由

在 vue-router 中定义嵌套路由需要配置路由的 children 选项

let router = [{
	path: '/user',
	name: 'User',
	component: User,
	children: [{
		path: 'a',
		name: 'A',
		component: A
	}]
}]

并且要在父组件中嵌入 <router-view></router-view> 来渲染该子组件

在 nuxt 中如何定义嵌套路由
在 nuxt 中定义嵌套路由，需要在该页面中创建一个 与该页面相同名称的文件，并在文件中放置对呀的子组件，而且需要在父组件中嵌入 <nuxt-child /> （他的作用和 <router-view /> 是相同的，用于渲染子组件）

文件结构
pages
–| about
----|a.vue // about 组件下的子组件 a
–| about.vue
–| index.vue

渲染结果

以上就是 nuxt 的基础的使用了