vue-router scrollBehavior无效的问题
在使用vue做单页面应用开发时候 使用vue-router作为路由控制器 在使用过程中发现每个页面打开都在原来的位置 不能返回到页面顶部位置 ,然后查看api文档
滚动行为 发现如下代码:
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
}
})
添加路由中后发现没有实际效果。。。
再细查资料发现作者在issues中说了
Hooking into transitions involves too many intricacies and depends on custom transition implementations, so vue-router is not going to support that as a built-in. It's possible to implement your own transition component for that purpose though.
意思是vue-router不在支持这个特性了
解决方式:
router.beforeEach((to, from, next) => {
document.body.scrollTop = 0;
next()
});
在路由遍历中使用js代码进行滚动条的顶部返回
vue-router scrollBehavior无效的问题的更多相关文章
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue路由scrollBehavior滚动行为控制锚点
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意: 这个功能只 ...
- vue-router scrollBehavior无效的问题及解决方案
在使用vue做单页面应用开发时候 使用vue-router作为路由控制器 在使用过程中发现每个页面打开都在原来的位置 不能返回到页面顶部位置 ,然后查看api文档 滚动行为 发现如下代码: con ...
- Vue技术点整理-Vue Router
路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...
- vue Router——进阶篇
vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
随机推荐
- django Multi-table inheritance ---- 用于实现基表-子表
SQL中的父子表.在django中可以直接通过模式的继承来完成! 一.django中的model定义如下: 1.django定义 from django.db import models # Crea ...
- unity, imageEffect在android上不显示的问题
使用imageEffect做了个景深特效,原理很简单,就是一张清晰大图和一张模糊小图根据z值进行混合,z值小的像素清晰大图的比例高一些,z值大的像素模糊小图的比例高一些. 在pc上是ok的,但打出an ...
- [CentOS] CentOS for vsftpd with MySQL Virtual user
從ubuntu 12.04的安裝手法拿到CentOS來真的有些很大的不同 絕大部分的語法.概念都是差不多的,只是指令上有些差別,跟ubuntu 有不一樣的地方特別拿出來另外說明 要讓vsftpd與my ...
- [Jobdu] 题目1348:数组中的逆序对
题目描述: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. 输入: 每个测试案例包括两行: 第一行包含一个整数n,表示数组 ...
- [svc]influxdb+grafana实战-各省份api访问成功率统计
简单说下需求: 统计各个省份的 3大运营商的接口访问成功率,绘图展示 数据格式 {"mobile" : "15812345608", "provinc ...
- MUTT+MSMTP利用163服务器发送邮件
监控系统发送告警邮件,我们自己搭建邮件服务器,成本较高,所以可以使用163等第三方MTA帮助我们发送.MUTT+MSMTP是一个很好的选择,具体实现如下: tar -xvf msmtp-1.6.5.t ...
- ibatis中in语句参数传入方法
第一种:传入参数仅有数组,iterate中不能有数组的属性名 <select id="GetEmailList_Test" resultClass=" ...
- Linux下安装配置MediaWiKi全过程
0.libxml2的安装 *下载http://rpmfind.net/linux/rpm2html/search.php?query=libxml2 *执行以下Linux命令进行安装 a)gu ...
- PHP多进程编程(2):管道通信
一个进程如果是个人英雄主义,那么多进程就是集体主义.(不严格区分多进程 和 多线程的差别) 你不再是一个独行侠,而是一个指挥家. 独来独往,非常自由自在,但是,很多时候,不如众人拾柴火焰高. 这就是我 ...
- 向服务器发送josn字符串,服务器端解析
<script type="text/javascript"> $(function () { $("#btnsave").click(functi ...