NuxtJS基础
一、介绍
官网：https://nuxtjs.org/
Nuxt.js是基于Vue.js生态的第三方开源服务器渲染框架，帮我们轻松的使用vue.js技术栈构建同构应用，主要关注的UI页面渲染
二、基础路由
地址：https://zh.nuxtjs.org/guide/routing
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
假设 pages 的目录结构如下：
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
那么，Nuxt.js 自动生成的路由配置如下：
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'
}
]
}
三、路由导航
- a 标签 :会刷新整个页面，不要使用
- 组件
- 编程式导航
<template>
<div id='app'>
<h1>about页面</h1>
<!-- a标签跳转 会刷新页面，不要使用 -->
<h3>a标签跳转</h3>
<a href="/">去首页</a>
<!-- router-link跳转 -->
<h3>router-link</h3>
<router-link to="/">去首页</router-link>
<!-- 编程式导航 -->
<h3>编程式导航</h3>
<button @click="onClick">点我跳转</button>
</div>
</template>
<script>
export default {
methods:{
onClick(){
console.log("123")
this.$router.push("/")
}
}
}
</script>
<style scoped>
</style>
四、动态路由
在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue
Nuxt.js 生成对应的路由配置表为：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.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 的路由路径带有 :id? 参数，?表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。
五、嵌套路由
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
Warning: 别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。
假设文件结构如：
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
Nuxt.js 自动生成的路由配置如下：
router: {
routes: [
{
path: '/users',
component: 'pages/users.vue',
children: [
{
path: '',
component: 'pages/users/index.vue',
name: 'users'
},
{
path: ':id',
component: 'pages/users/_id.vue',
name: 'users-id'
}
]
}
]
}
六、动态路由
创建配置文件，nuxt.config.js
module.exports = {
router: {
//配置根路径
base: '/abc',
//routes：一个数组，路由配置表
//resolve：解析路由组件路径
extendRoutes(routes,resolve){
routes.push({
path: '/test',
name: 'test',
component: resolve(__dirname, 'pages/about.vue')
})
}
}
}
七、异步数据asyncData
Nuxt.js 扩展了 Vue.js，增加了一个叫* asyncData *的方法，使得我们可以在设置组件的数据之前能
异步获取或处理数据。
基本用法：
- 它会将asyncData返回的数据融合组件data方法返回数据一并给组件。
- 调用时机：服务端渲染期件和客户端路由更新之前
注意：只能在页面组件中使用，作为子组件的时候不可使用其中的属性值，没有this，因为它是在组件初始化之前被调用的。