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