when axios,it error!
Error tips:
[Vue warn]: Invalid prop: type check failed for prop "to". Expected String, Object, got Undefined.
so,I doubt the reason is 'nuxt-link',on it exits "to",hower,I don't know how to do it!
who can help me,please!
And my code as follow:
<template>
<div class="layout">
<div class="waiting" :class="{waited: staticD.wait}">
<div class="letter-holder">
<div class="l-1 letter">V</div>
<div class="l-2 letter">O</div>
<div class="l-3 letter">G</div>
<div class="l-4 letter">L</div>
<div class="l-5 letter">A</div>
<div class="l-6 letter">S</div>
<div class="l-7 letter">S</div>
<div class="l-8 letter"> </div>
<div class="l-9 letter">V</div>
<div class="l-10 letter">I</div>
<div class="l-11 letter">L</div>
<div class="l-12 letter">L</div>
<div class="l-13 letter">A</div>
<div class="l-14 letter"> </div>
<div class="l-15 letter">D</div>
<div class="l-16 letter">C</div>
<div class="l-17 letter">.</div>
<div class="l-18 letter">.</div>
<div class="l-19 letter">.</div>
</div>
</div>
<header class="header">
<div class="logo"><nuxt-link :to="dynamicD.rootdir"><img :src="dynamicD.logosrc"></nuxt-link></div>
<ul class="nav">
<li v-for="(val, idx) in dynamicD.nav"><nuxt-link :to="{path: val.curpath}" :class="{a_on: dynamicD.curpath === val.curpath ? true : false}" exact>{{ val.txt }}</nuxt-link></li>
</ul>
<div class="tel" :style="{'background-image': 'url('+dynamicD.telimg+')'}">{{dynamicD.tel}}</div>
</header>
<nuxt/>
<div class="rfloat">
<div class="gotop" :class="staticD.fade" @click="gotop()">
<img :src="dynamicD.gotopimg">
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
staticD: { // 静态数据
wait: false,
fade: ''
},
dynamicD: { // 动态请求数据
// 'curpath': '/',
// 'gotopimg': '/img/i-top.png',
// 'logosrc': '/img/logo.png',
// 'nav': [
// { 'curpath': '/', 'txt': '首页' },
// { 'curpath': '/cases', 'txt': '案例' },
// { 'curpath': '/designers', 'txt': '设计师' },
// { 'curpath': '/properties', 'txt': '热装楼盘' },
// { 'curpath': '/constructions', 'txt': '在施工地' },
// { 'curpath': '/embodiments', 'txt': '别墅实施' },
// { 'curpath': '/furnishings', 'txt': '别墅软装' },
// { 'curpath': '/villas', 'txt': '出版刊物' },
// { 'curpath': '/about', 'txt': '关于' }
// ],
// 'rootdir': '/',
// 'tel': '400-001-5820',
// 'telimg': '/img/tel.png'
}
}
},
created () {
this.fetchData()
},
beforeMount () {
this.init(window, document)
this.pathfn() // 渲染dom前调用导航定位
},
mounted () {
// this.fetchData()
// console.log(this.$route)
this.$nextTick(function () {
this.staticD.wait = true
})
this.handleScroll()
window.addEventListener('scroll', this.handleScroll)
},
beforeUpdate () {
// console.log(this.$route)
this.pathfn() // 路由切换调用导航定位
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},
watch: {
},
methods: {
fetchData: function () {
let that = this
axios.post('http://rap.taobao.org/mockjsdata/30077/api/default')
.then(function (res) {
console.log(res.data)
that.dynamicD = Object.create(res.data)
})
.catch(function (err) {
console.log(err)
})
},
init: function (win, doc) { // 自适应
function setFontSize () {
// 获取window 宽度
// zepto实现 $(window).width()就是这么干的
var winWidth = (window.innerWidth / 1920) * 100
winWidth = winWidth > 100 ? 100 : winWidth
doc.documentElement.style.fontSize = winWidth + 'px'
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize'
var timer = null
win.addEventListener(evt, function () {
clearTimeout(timer)
timer = setTimeout(setFontSize, 300)
}, false)
win.addEventListener('pageshow', function (e) {
if (e.persisted) {
clearTimeout(timer)
timer = setTimeout(setFontSize, 300)
}
}, false)
// 初始化
setFontSize()
},
pathfn: function () { // 导航定位
let reg = this.$route.path.lastIndexOf('/') === 0 ? /^(\/\w*$)/g : /^(\/\w+\/)/g
let aPath = this.$route.path.match(reg)[0]
this.dynamicD.curpath = aPath === '/' ? '/' : aPath.replace(/\/$/g, '')
// console.log(reg, this.$route)
// console.log(this.curpath)
},
gotop: function () { // 点击回到顶部
let timer = null
let oTop
let eleSec = document.documentElement
cancelAnimationFrame(timer)
timer = requestAnimationFrame(function fn () {
oTop = eleSec.scrollTop
// console.log(oTop)
let speed = Math.ceil(oTop / 9)
if (oTop > 0) {
eleSec.scrollTop = oTop - speed
timer = requestAnimationFrame(fn)
// console.log(1)
eleSec.ontouchstart = function () {
// console.log(1)
cancelAnimationFrame(timer)
}
} else {
cancelAnimationFrame(timer)
}
})
},
handleScroll: function () { // 滚动到底部显示回到顶部按钮
let oTop
let dVal
let scroH = document.documentElement.scrollHeight
oTop = document.documentElement.scrollTop
dVal = scroH - oTop - document.documentElement.clientHeight
if (dVal > 500) {
this.staticD.fade = 'fadeout'
} else {
this.staticD.fade = 'fadein'
}
}
}
}
</script>
<style>
/**
* header
*/
.header{
height: 1rem;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
background: rgba(243, 241, 239, 0.8);
}
.header .logo{
height: 100%;
display: inline-block;
padding: .2rem 0;
margin-left: 1.3rem;
}
.header .logo img{
height: 100%;
width: auto;
}
.header ul,
.header li,
.header .tel{
display: inline-block;
}
.header ul{
margin-left: 2rem;
}
.header li{
width: 1rem;
text-align: center;
}
.header .tel{
margin-left: 2rem;
padding-left: .25rem;
font-weight: bold;
font-size: 1.2em;
background: url(~static/img/tel.png) left center no-repeat;
background-size: auto 100%;
}
section{
padding-top: 1rem;
}
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.links {
padding-top: 15px;
}
/**
* 返回顶部
*/
.rfloat {
position: fixed;
right: .2rem;
bottom: 2rem;
width: .5rem;
z-index: 1000;
}
.rfloat .gotop {
background: rgba(89, 87, 87, .8);
padding: 25%;
/*display: none;*/
/*transform: scale(0, 0);*/
border-radius: .1rem;
box-shadow: 1px 1px 1px .01rem #595757;
transition: all;
}
.rfloat .gotop:hover{
background: rgba(215,0,15,.8);
box-shadow: 1px 1px 1px .01rem #d33c46cc;
}
.rfloat .gotop.fadeout{
animation: fadeout .8s;
display: none;
}
.rfloat .gotop.fadein{
display: block;
animation: fadein .8s;
}
@keyframes fadeout {
from{opacity: 1;}
to{opacity: 0;}
}
@keyframes fadein {
from{opacity: 0;}
to{opacity: 1;}
}
</style>
<!--cmty--><!--cmty_prevent_hook-->
<div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2068">#c2068</a>)</em></sub></div>