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 ...
随机推荐
- NPM 模块收集
cross-env https://www.npmjs.com/package/cross-env 在package.json设置环境变量的时候,会有兼容性问题,如: { "scripts& ...
- [转]C#如何判断操作系统位数是32位还是64位
方法一: 对于C#来说,调用WMI是一种简单易行的方式.我们可以用Win32_Processor类里面的AddressWidth属性来表示系统的位宽.AddressWidth的值受CPU和操作系统的双 ...
- sso单点登录研究
iframe跨域通信的通用解决方案http://www.alloyteam.com/2012/08/lightweight-solution-for-an-iframe-cross-domain-co ...
- 云中的机器学习:FPGA 上的深度神经网络
人工智能正在经历一场变革,这要得益于机器学习的快速进步.在机器学习领域,人们正对一类名为“深度学习”算法产生浓厚的兴趣,因为这类算法具有出色的大数据集性能.在深度学习中,机器可以在监督或不受监督的方式 ...
- 每日英语:The First Day On A Job Is Tough Work
Why is the first day on the job often the worst? New employees tend to be greeted with stacks of ben ...
- ERROR 1130 (HY000): Host '192.168.0.190' is not allowed to connect to this MySQL serv
环境: CentOS6.2.MySQL5.1 问题描述: 在配置文件中将需要连接的MySQL的host设置为192.168.0.190(其实就是我自己的IP地址),然后运行自己的程序,结果返回MySQ ...
- sql语句判断是否为数字、字母、中文
1. sql语句判断是否为数字.字母.中文 select ascii(字段) 数字:48-57字母:65-123汉字:123+ 如,要删除某个全为数字的字段 DELETE FROM table WH ...
- msf提权命令/meterpreter下的几个命令
废话: 今天本来日学校内网.以为是台08.结果稀里糊涂居然日了宿舍哥们儿的PC机.按道理都该装杀毒的才对,我舍友都不装的.裸装上阵说的就是我舍友了.劝各位大佬.把杀毒装好.补丁打好. 通过这次我也学到 ...
- flume+kafka
这里演示在单机fulume环境下,kafka作为source ,chanel , sink时三种情况 下面的测试都是基于下面的基本的配置文件进行修改的 a1.sources = r1 a1.sinks ...
- Okra框架(二) 搭建Socket服务器
本文将介绍使用Okra框架帮助开发者快速搭建高性能应用程序Socket服务端. 博主接触的网络游戏(包含但不限于网页, 手机)的服务端通信使用的协议基本上就Socket,Http或是WebSocket ...