<强>滚动行为
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。vue-router能做的到,而且更好,它让你可以自定义路由切换时页面如何滚动。
<强>注意:这个功能只在HTML5上模式下可用。
scrollBehavior方法接收从路和由对象。第三个参数savedPosition当且仅当popstate导航(通过浏览器的前进/后退按钮触发)时才可用。
const路由器=new VueRouter ({
路线:[…],
scrollBehavior(从savedPosition) {//返回期望滚动到哪个的位置
｝
})
之前
返回滚动位置的对象信息
{x:数,y:数}
{选择器:字符串}
如果返回一个布尔假的值,或者是一个空对象,那么不会发生滚动。
& lt; div id=坝τ谩北?
& lt; h2>滚动行为& lt;/h2>
& lt; ul>
& lt; li> & lt; router-link="/"祝辞首页& lt;/router-link> & lt;/li>
& lt; li> & lt; router-link="/foo”在导航& lt;/router-link> & lt;/li>
& lt; li> & lt; router-link="/酒吧”在关于& lt;/router-link> & lt;/li>
& lt; li> & lt; router-link="/酒吧# an1”在红色页面& lt;/router-link> & lt;/li>
& lt; li> & lt; router-link="/酒吧# an2”在蓝色页面& lt;/router-link> & lt;/li>
& lt;/ul>
& lt; router-view> & lt;/router-view>
& lt;/div>
& lt; script>
var={回家
模板:“& lt; div> home</div>”
｝
var Foo={
模板:“& lt; div> foo</div>”
｝={var酒吧
模板:
｀
& lt; div>
酒吧
& lt; div祝辞& lt;/div>
& lt; p id=" an1 "祝辞红色页面& lt;/p>
& lt; p id=" an2 "祝辞蓝色页面& lt;/p>
& lt;/div>
｀
｝
var路由器=new VueRouter ({
模式:“历史”,//控制滚动位置
scrollBehavior(从savedPosition) {//判断如果滚动条的位置存在直接返回到当前位置,否者返回到起点
如果(savedPosition) {
返回savedPosition
其他}{
如果(to.hash) {
返回{选择器:to.hash}
｝
｝
}，
路线:[
{
路径:“/?组件:回家
}，
{
路径:”组件:foo/foo”
}，
{
路径:“/酒吧”,组件:酒吧
｝
］
});
var vm=new Vue ({
埃尔:“#应用”,
路由器
});
& lt;/script>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
