每周有收获-nuxt 页面级新增和应用
Nuxt 页面级新增
layOut:属性
选择当前布局所在的父模版。
page文件夹下为：页面级组件 举个例子为testPage.vue
Layouts文件下的文件可以提供一个页面的父级环境
举个例子：在layouts文件夹下新建test.vue 正常书写html等,在你想要填充page 的页留下 <nuxt /> 标签， 并在 testPage.vue中设置属性 layOut:’test’。那么您的page页面将渲染到 test.vue的原来的<nuxt /> 标签位置。
我个人理解。这有点像 vue卡槽。
渲染结果如图：
Validate方法
有点vue 组件自定义属性传递的validate的效果。也可以当做页面建权使用
validate({ params, query, store }) {
return true
},
类比：这点和vue中组件自定义属性传递validate很相似。你可以取到
归根结底是object的挂载和验证。可以做一些鉴权验证操作 如果return true 则正常显示页面。return false 会现实 ERR 页面
注意： validate 方法的参数1是context，第二个参数是回调函数。下面新增方法也是一样。
asyncData 方法
你可能想要在服务器端获取并渲染数据。Nuxt.js添加了asyncData方法使得你能够在渲染组件之前异步获取数据。
需要注意：asyncData 仅限于在页面组件上使用。
无法使用this调用其data()中实例对象
您可以使用 Promise.all 来实现多个http 的并发请求
举个例子您可以3重方式书写
- async await 2、return 一个promise 3、使用第二参数callback
方法2
async asyncData () {
// 正确
let [pageRes, countRes] = await Promise.all([
axios.get('/api/users1'),
axios.get('/api/users2')
])
return {
Users1: pageRes,
Msg2: countRes
}
},
方法2
asyncData ({ params }) {
return axios.get(`https://my-api/posts/${params.id}`) .then((res) => { return { title: res.data.title } })
}
方法 3 也可以使用第二参数callback达到目的。
asyncData ({ params }, callback) {
axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
callback(null, { title: res.data.title })
})
}
Fetch方法
fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。运行在 Vue 的 create 钩子函数之后
方法1:
fetch ({ store, params }) {
return axios.get('http://my-api/stars')
.then((res) => {
store.commit('setStars', res.data)
})
}
方法2:
async fetch ({ store, params }) {
await store.dispatch('GET_STARS');
}
但是浏览器query的变化 是不能被fetch监听到的。如果您期望query变化引起相应code操作。那么 以设置通过页面组件的watchQuery属性来监听参数的变化
通过 asyncData 和fetch 的简单了解。相同点是都是在服务端发起http请求。如果您想将请求的信息共享，您应该使用 fetch。否则使用asyncData
另附Nuxt生命周期图
Fetch 钩子函数是在服务器端组件实例化后调用的。可以调用this。也就是说，你可以使用methods的方法。
head 方法
名字即为它的本意，可以定制化设置页面头。Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head) 和 html 属性。可以使用this获取组件内部的data。更可以为页面单独注入js.
也与nuxt.config.js 中的head属性写法相似。
head: {
title: '学而思网校春季特训班',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: 'https://res18.xesimg.com/public/favicon.ico'
}
],
script: [
{
charset: 'utf-8',
src:’https:xxxx.xxx.xxx.js’,
body: true
},
},
但是您需要知道，如何避免反复的配置。您可以在nuxt.config.js 中配置默认 meta：
当有组件定义了相同 hid 的 meta 标签时。会覆盖父级配置。
watchQuery 属性
进行监听query。
出于性能考虑，默认空[];
如果你想对query 的某个关键key做监听 例如 ?orderNum=12345&b=222&c=333
你只想对OrderNum变化做监听，watchQuery:[OrderNum]
如果你想监听所有的值（不推荐） watchQuery:true。
监听query,将执行方方法 (asyncData, fetch, validate, layout, ...)
key 属性
Key：String 或者Function
key属性赋值到<router-view>，这对于在动态页面和不同路径中进行转换很有用。不同的key会使页面组件重新渲染。
设置key方法1
<nuxt :nuxt-child-key="someKey" />
方法2 在页面组件中
export default {
key(route) {
return route.fullPath
}
}
方法3 页面组件中的watchQuery选项：boolean 或 string [] 也就是说，watchQuery 可以达到和变key一样的效果。
回想一下。vue中 同逻辑v-if v-else 为什么key值推荐相同 。
Loading 属性
进度条 true 或者false nux自带的进度条属性（效果），当然您可以重写他（实战章节介绍）。更可以在业务开发中调用它。
您也可以在页面代码只这样写：
this.$nextTick(() => {
this.$nuxt.$loading.start()
setTimeout(() => this.$nuxt.$loading.finish(), 5000)
})
Middleware 属性
值为: 字符串或者数组
中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。
中间件执行流程顺序：
nuxt.config.js
匹配布局
匹配页面
数：
举个例子
例子：
在page下
pages/home.vue
export default {
middleware: 'authenticated' //引用的middleware
}
在middleware/authenticated.js
export default function (context) {
// 一些逻辑上的处理、或者鉴权、或者 l发送特殊日志等
if (!context.store.state.authenticated) {
return redirect('/login')
}
}
中间件可以异步执行,只需要返回一个 Promise 或使用第 2 个 callback 作为第一个参
参考asnyDate条目
scrollToTop属性
scrollToTop 属性用于控制页面渲染前是否滚动至页面顶部。默认为true。
默认情况下，从当前页面切换至目标页面时，Nuxt.js 会让目标页面滚动至顶部。但是在嵌套子路由的场景下，Nuxt.js 会保持当前页面的滚动位置，除非在子路由的页面组件中将 scrollToTop 设置为 true
如果你想改变 Nuxt.js 上述的默认的页面滚动逻辑，请参考 scrollBehavior 配置项。
这里解释一红线圈住的话（图文）
Transition 属性
Nuxt.js 使用 Vue.js 的组件来实现路由切换时的过渡动效。可以是String、Object、Function
参考：
https://www.nuxtjs.cn/api/pages-transition
https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90
1030
774
暂无认证
到【灌水乐园】发言
