博主经过一夜的奋斗终于解决了很多nuxt的问题,参数的传递,刷新页面重新渲染,数据请求等
不多说直接上代码
在pages添加 index.vue
<template>
<section class="container">
<div>
<app-logo/>
<div class="links">
<button @click='login' class="button button-caution">点我</button>
</div>
</div>
</section>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue'
import axios from 'axios'
export default {
components: {
AppLogo
},
methods: {
login () {
axios({
withCredentials: true,
method: 'get',
url: `url`,
}).then((res) => {
this.$router.push('/show')
})
}
}
}
</script>
在pages添加show.vue
<template id="app">
<section class="container">
<sun :papa="account"></sun>
<div>
<div class="links">
=== {{ account }} ===
</div>
</div>
</section>
</template>
<script>
import axios from 'axios'
import sun from './sun'
export default {
data () {
return {
account: ''
}
},
methods: {
async getData () {
let { data } = await axios({
withCredentials: true,
method: 'get',
url: `url`
})
this.account = data.account
}
},
components: {
sun
},
created () {
this.getData ()
}
}
</script>
<style>
</style>
在pages添加sun.vue
<template>
<div>
<div>
+++ {{ papa }} +++
</div>
<div>
^^^ {{ pada }} ^^^
</div>
</div>
</template>
<script>
export default {
name: 'sun',
props: ['papa'],
data () {
this.$watch('papa', function(newVal, oldVal){
console.log(newVal)
this.pada = newVal
});
return {
pada: ''
}
}
}
</script>
<style>
</style>