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 的基础的使用了

Logo

前往低代码交流专区

更多推荐