共计 683 个字符,预计需要花费 2 分钟才能阅读完成。
1. 用 vue 做单页应用时,当页面滚动之后,跳转到其他页面,如果跳转到的页面大于一屏的高度,该页面的滚动条不会置顶
解决方案:
在 router.js 底部加上如下代码
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
return {x: 0, y: 0}
}
2.if-else 闪烁问题,初始数据为空,当 created 里的接口请求的数据过来之后,页面会出现 dom 更新的闪烁问题
解决方案:
运用组建内路由前置守卫,提前请求数据,在挂载 dom 前更新数据,关于路由守卫可参考路由守卫
{beforeRouteEnter (to, from, next) { //next 需要被主动调用,不然跳转不到该页面
serv.test()
.then(res => {
next(vm => { // 这里还无法访问到组件实例,this === undefined
// 通过 `vm` 访问组件实例
vm.listData = res.data.results
})
})
.catch(err => {console.log(err)
})
},
mounted () {console.log(this.listData) // undefind
}
}
此路由守卫还可以用于权限拦截和页面非法跳转
3.vue 数据双向绑定, 数据改变后不能立马反映到视图上,在给 vue data 中 object 类型数据赋值时存在不实时显示的情况
解决方案:
见 Vue.js 中文官网 -> 进阶 -> 深入响应式原理 -> 变化检测问题
Vue.set(vm.someObject, 'b', 2)
this.$set(this.someObject,'b',2)
正文完