鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 在vue-cli中怎么做app的啟動(dòng)頁(yè)面

在vue-cli中怎么做app的啟動(dòng)頁(yè)面

在vue-cli中怎么做app的啟動(dòng)頁(yè)面,
在啟動(dòng)項(xiàng)目的時(shí)候先加載這個(gè)頁(yè)面,圖片描述
加載完之后跳轉(zhuǎn)到這個(gè)頁(yè)面圖片描述
這個(gè)應(yīng)該怎么寫,要把這個(gè)頁(yè)面放到項(xiàng)目的哪個(gè)位置中去

回答
編輯回答
久舊酒

一樓的辦法可以,不過我是這么解決的:
寫一個(gè)splash.vue組件,放在app.vue根組件里面,與vue-router平級(jí):
fixed定位,讓他蓋在vue-router上面
Splash.vue

<template>
  <div id="splash">
      <img src="">
  </div>
</template>

<script>

</script>

<style lang="stylus" rel="stylesheet/stylus">
  #splash
    position fixed
    top 0
    left 0
    z-index 6
    width 100%
    height 100%
    opacity 1
    transition opacity .3s ease
    box-sizing border-box
    &.fade-enter,&.fade-leave-to
      opacity 0;
</style>

App.vue

<template>
  <div id="app">
    <transition name="fade">
      <v-splash v-show="splash"></v-splash>
    </transition>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

之后在一定時(shí)間后將splash變成false就可以讓splash組件隱藏,使內(nèi)容顯示出來(lái)

2018年1月18日 13:23
編輯回答
晚風(fēng)眠

這不是很簡(jiǎn)單的嘛?給啟動(dòng)頁(yè)一個(gè)組件,比如叫splash.vue,然后在mounted(){}里面做一個(gè)定時(shí)器,2s后跳轉(zhuǎn)到login.vue這個(gè)組件

2018年7月30日 18:17