<template>

     <div class="row">

         <div id="home" class="col-sm-12 text-center">

             <div id="background">

                 <h1>欢迎大家品尝Pizza！</h1>

                 <h2>这里有你非常喜欢的Pizza!</h2>

                 <button @click="gotoMenu" class="btn btn-success">跳转</button>

             </div>

         </div>

     </div>

 </template>

<style>

 /* 85vh是指高度占整个屏幕的85% ,vw宽度*/

 #home{

     background: url('../assets/pizza.jpg');

     height: 85vh;

     padding: 10%;

 }

 h1,h2{

     margin: 6%;

 }

.background{

    background: #eee;

    opacity: 0.8;

    max-width: 70vw;

    margin: 0 auto;

    padding: 20px 0;

}

</style>　　

scrollBehavior(to,from,savedPosition){

    //return { x:0,y:100}//展现x为0，y为100的位置从上开始

    //return { selector: '.btn'}//展现butten所在的位置

    //鼠标滑动触发savePosition，若true就返回savedPosition位置，否则就x:0, y:0位置

    if(savedPosition){

      return savedPosition

    }else{

      return {x:0, y:0}

    }

  }