文章学习来源,nuxt中文网
1. 安装nuxt
- 指令
npx create-nuxt-app t_nuxt
- 或
yarn create nuxt-app f_nuxt
- 执行指令后按需选择添加自己所需要的相关依赖,若安装出现报错等问题
- 清除npm、yarn缓存
npm cache clean --force
yarn cache clean
- 切换安装命令
- 切换包管理工具
- 清除npm、yarn缓存
cd t_nuxt
->npm run dev
2. 路由信息
- 无需配置路由信息,在pages下面创建文件自动生成对应的路由配置
- 若pages下面是文件夹/页面.vue,会识别成 /文件夹/页面.vue路径
2.1 根据目录生成路由信息
通过pages下面的目录结构,会自动生成对应的路由信息,无需单独设置路由文件并在其中定义规则,动态路由以下划线_
为开头
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
以上页面结构对应的路由信息是
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'slug-comments',
path: '/:slug/comments',
component: 'pages/_slug/comments.vue'
}
]
}
你会发现动态路由,如果作为结尾出现,那么就是可选的,比如/users/:id?'
,如果想将其设置为必选的,需要在其对应的目录下一级,创建一个index.vue文件,比如/:slug
2.2 路由参数校验
若我们想要在详情页中,规定了对应的详情页根据列表中具体的某个id来实现跳转,为了保障合法性,规定id只为纯数字类型,那么我们在对应动态路由页面可以对当前页面路由进行参数校验。
在对应动态路由页面增加validate方法,按照自定义规则对内容进行校验,如果校验结果为true,则正常运行与展示,如果返回结果为false,nuxt将自动加载错误页面
validate({params}) {
return /^\d+$/.test(params.id)
},
3. 实现页面切换时的动画效果
3.1 nuxt.config.js 配置全局css文件
css: [
'@/assets/css/main.css'
],
3.2 全局css文件定义
- assets/css/main.css
.page-enter-active, .page-leave-active {
transition: opacity 0.5s;
}
.page-enter, .page-leave-to /* .page-leave-active 在 <2.1.8 版本中 */ {
opacity: 0;
}
.test-enter-active,
.test-leave-active {
transition: opacity 0.5s;
}
.test-enter,
.test-leave-active {
opacity: 0;
}
我们看到有两种动画过渡样式,page-X代表页面间切换默认的动画效果,若还有其他类型的切换效果,比如下面的test-X,我们可以在对应页面中进行配置
export default {
transition: 'test'
}
3.3 页面跳转
<nuxt-link to="/">返回首页</nuxt-link>
this.$router.push('/')
4. 路由中间件
中间件允许您定义一个自定义函数在一个页面或一组页面渲染之前,中间件放置在middleware目录下,文件名称就是中间件的名称,例如:我们可以在页面渲染前确认当前页面是否有访问权限。中间件可以修改context中的内容信息
4.1 定义中间件功能
export default function (context) {
console.log(context, '获取到的context指的是什么')
}
4.2 全局应用中间件
全局中间件在nuxt.config.js中定义
export default {
router: {
middleware: 'globalSolve', // 中间件的名称就是定义中间件那个文件的文件名
},
}
4.3 部分页面应用中间件
在页面中配置middleware
export default Vue.extend({
middleware: 'auth',
})
4.4 中间件执行流程顺序
- nuxt.config.js
- 匹配布局
- 匹配页面
4.5 中间件异步执行
中间件可以异步执行,只需要返回一个Promise或使用第二个callback作为第一个参数
import axios from 'axios'
export default function ({ route }) {
return axios.post('http://my-stats-api.com', {
url: route.fullPath
})
}
5. 视图布局
页面布局代码,放置在layouts文件夹中,常见的布局方式有导航栏、侧边栏、底部栏等等,我们可以在layouts中将不同类型的布局进行定义,在对应页面中进行引入
5.1 全局默认layouts
layouts布局分为全局和部分,layouts/default.vue为全局默认布局,在所有页面都自动应用,除非在页面的layout中定义了其他的layout,不配置的默认全部执行default.vue
layouts/default.vue
<template>
<div class="flex">
<div class="left">
定义一个侧边栏吧
</div>
<div class="right">
<nuxt /> // 表示布局中将自定义内容在此处显示,如若不加nuxt占位符,只会展示这个default.vue中的内容,不会展示对应路由页面文件中定义的内容
</div>
</div>
</template>
<style scoped>
.flex {
display: flex;
}
.left {
width: 300px;
min-height: 100vh;
background-color: aqua;
}
.right {
flex: 1;
background-color: antiquewhite;
}
</style>
5.2 自定义布局
全局有默认布局,但如果部分页面有其他的布局方式,可以在页面中设置layout来覆盖全局默认的布局方式
例如只有部分页面有header,我们在layouts/header.vue中定义header方式的布局
layouts/header.vue
<template>
<div>
<div class="top">
顶部导航栏
</div>
<div>
<nuxt />
</div>
</div>
</template>
<style scoped>
.top {
height: 88px;
width: 100vw;
background-color: burlywood;
}
</style>
在对应使用页面中应用header布局方式
pages/xx.vue页面中
export default Vue.extend({
name: 'IndexPage',
layout: 'header',
})
5.3 错误页面
5.3.1 默认错误页面
当跳转过程中有发生错误页面时,可以有一个默认的全局错误页面,但如果在不同的错误情形中有一些自定义的错误展示时,此时我们可以通过定制错误模板传参数的方式实现自定义错误页面
layouts/error.vue
<template>
<div>
<h1>当前页面似乎发生了一些问题</h1>
<nuxt-link to="/">返回至首页</nuxt-link>
</div>
</template>
5.3.2 自定义错误页面
- layouts/error.vue 错误信息页面
<template>
<div>
<h1 v-if="error.statusCode === 404">页面未找到</h1>
<h1 v-else>发生错误</h1>
<nuxt-link to="/">返回首页</nuxt-link>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
props: ['error'],
layout: 'error-layout'
})
</script>
- layouts/error-layout.vue 错误信息模板页面
<template>
<div>
<h1>公共错误页面头部</h1>
<nuxt />
<h1>公共错误页面底部</h1>
</div>
</template>
5.4 页面
nuxt中page页面组件实际上是Vue组件,在nuxt.js中为这些页面中增加了一些新的配置项(对应了nuxt.js提供的功能特性),方便我们可以快速开发
5.5 注意事项
- 布局layout中一定要增加
<nuxt />
标签,标签所占的位置就是页面除了布局外其他定义的内容所在的位置,相当于slot,若无该标签,则所有页面都展示布局内容,其他内容无法显示
6.注意事项
- index页面无需路由拼接,直接
/
路径 - pages页面不可名称重复,识别重复不区分大小写
<template>
模板之间只有一个根标签- 在页面中使用components组件,无需import,直接使用即可
- 在components中,若想对组件用文件夹分类,直接使用文件夹中页面.vue组件的名称即可完成使用,也无需import
- 使用this.$router.push等方法在TypeScript状态下会有警告,可以通过以下方法来进行解决
import Vue from "vue"; export default Vue.extend({ methods: { backToHome() { this.$router.push('/') } } })
如果有用,点个赞呗~
总结用法,希望可以帮助到你,
我是Ably,你无须超越谁,只要超越昨天的自己就好~