vue项目1-pizza点餐系统7-路由之控制滚动行为

一、在home组件中设置具体信息，设计样式

<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>　　

二、设置滚动页面展示位置

在index.js中添加scrollBehavior

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}
    }
  }