安装
- 全局安装vue-cli(若已安装,直接跳过)
- vue init nuxt-community/starter-template <project-name>
路由创建
在page目录中创建.vue文件或目录,nuxt会为我们自动创建路由
page
|---- index.vue (对应路由为 /
|---- login.vue (对应路由为/detail
|---- user
|---------- account.vue (对应路由为/user/account.vue
|---------- index.vue (对应路由为 /user
|---- topic
|--------detail
|------------_id
|----------------index.vue (对应路由为 /topic/detail/:id
异步数据获取
使用钩子函数asyncData
<template>
<div class="topic-list">
<p @click="loadMore">topicList</p>
<p v-for="item in list" :key="item">{{item}}</p>
</div>
</template>
<script>
export default {
name: 'topicList',
data () {
return {
};
},
asyncData () {
return new Promise((resolve, reject) => {
setTimeout( ()=> {
resolve([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
}, 1000)
}).then((data) => {
return {list: data};
})
},
methods: {
loadMore () {
this.list = this.list.concat([11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
}
}
};
</script>
网友评论