我对vue.js(和vue-router)非常陌生,我试图弄清楚如何加载初始化某些页面组件所需的异步数据。根据文档,可以使用beforeRouteEnter
来完成此操作:
const Page = {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.foo = {
bar: 'blah'
};
})
},
data() {
return {
foo: null
};
},
template: '<div>{{ foo.bar }}</div>'
};
如果我没有正确初始化foo,则组件渲染将失败,并出现错误原因,导致foo.bar
在初始化之前被访问。好的,我可以通过为foo
提供默认值来解决此问题,但这会引出下一个问题:
答案 0 :(得分:0)
如果是异步加载,那么我认为您为foo设置默认值是正确的方法。那时,将负载放在beforeRouteEnter还是仅在创建的函数中都没有关系。
就显示中间状态而言,我要做的只是拥有最初为true的'pageLoading'变量。然后,我有一个v-if ='pageLoading'{//渲染微调框或加载时想要的任何外观} v-else {//正常渲染页面}。这样,您就可以拥有导航栏,并且这样的内容(无论是否在if / else之外)都会在异步加载发生之前出现,因此在加载过程中它不仅看起来像是一个怪异的空白页。
然后,当异步加载承诺完成时,您当然会将pageLoading设置为false。