先看要求：
有个公共函数需要在进入页面前就要执行，用于设置缓存，首页或者其他页面都需要使用这个缓存数据，并且用户可以自由进出不同页面，所以设置缓存的函数在首页执行并不可取，但每个页面都执行设置缓存函数会使得代码变得有些冗余。

Vue框架中有App.vue文件，每次进入应用都会执行App.vue中的生命周期，可以利用Promise，让App.vue先执行异步操作，再执行其他页面中的操作。

App.vue

<template>
    <router-view />
</template>

<script>
export default {
  data(){
    return{

    }
  },
  mounted(){
  		//模拟接口返回数据，但是这个接口要等10秒才能完成
   	setTimeout(()=>{
		console.log("异步操作");
		this.$reslove();
	},5000)
  }
}
</script>

<style lang="less">

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

Vue.prototype.$onWait=new Promise((reslove)=>{
  Vue.prototype.$reslove=reslove;
})


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

index.vue

<template>
    <div>
    	<h1>Index.vue<h1>
    </div>
</template>

<script>
export default {
    name:"Home",
    data(){
        return{

        }
    },
    async mounted(){
        await this.$onWait;
        console.log("先执行了App.vue生命周期中的异步，再执行Index.vue的生命周期");
    },
}
</script>

<style lang="less" scoped>

</style>

因为async/await可以将Promise的异步操作像同步一样操作。