在vue-cli中怎么做app的启动页面

在vue-cli中怎么做app的启动页面,
在启动项目的时候先加载这个页面,图片描述
加载完之后跳转到这个页面图片描述
这个应该怎么写,要把这个页面放到项目的哪个位置中去

回答:

这不是很简单的嘛?给启动页一个组件,比如叫splash.vue,然后在mounted(){}里面做一个定时器,2s后跳转到login.vue这个组件

回答:

一楼的办法可以,不过我是这么解决的:
写一个splash.vue组件,放在app.vue根组件里面,与vue-router平级:
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>

之后在一定时间后将splash变成false就可以让splash组件隐藏,使内容显示出来

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注