Vue Router 懒加载组件状态不支持loading属性 | vue router loading
更新:GithubIssue上有人提了这个问题,目前解决方法就是添加一个异步组件:https://github.com/vuejs/vue-router/pull/2140[1]github.com/vuejs/vue-router[2]Addsectionabouthandlingloadingstatetolazy-loadingdoc[3]1commitschanged1fileswith49additionsand0deletions.VueRouter懒加载过程中需要显示loading状态,大部分的解决方案是使用beforeEach和afterEach的函数。看到官网上异步组件的介绍,异步组件支持一个loading的属性,这个属性主要用于异步组件的定义。[4]特别是最后一句:注意如果你希望在VueRouter[5]的路由组件中...
更新:Github Issue 上有人提了这个问题,目前解决方法就是添加一个异步组件:https://github.com/vuejs/vue-router/pull/2140[1]
github.com/vuejs/vue-router[2] Add section about handling loading state to lazy-loading doc[3]1 commits changed 1 files with 49 additions and 0 deletions.
Vue Router 懒加载过程中需要显示loading状态,大部分的解决方案是使用beforeEach和afterEach的函数。
看到官网上异步组件的介绍,异步组件支持一个loading的属性,这个属性主要用于异步组件的定义。[4]
特别是最后一句:
注意如果你希望在 Vue Router[5] 的路由组件中使用上述语法的话,你必须使用 Vue Router 2.4.0+ 版本。我的问题是Vue Router是否支持以上的写法呢?router-view的懒加载显示loading状态是很常见的场景。
经过测试,Vue Router不支持loading状态的显示,只支持异步加载。代码如下
JS Bin on jsbin.com[6]
var syncComponent = { template: <div>Sync Component</div> } var asyncComponent = function () { return new Promise(function (resolve) { setTimeout(function() { resolve({ template: <div>Async Component</div> }) }, 1000) }) } var LoadingComponent = { template: <h1>Loading...</h1&...