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 ...
随机推荐
- MySQL多线程同步-Transfer使用测试
由淘宝核心系统研发—数据库组开发的MySQL-Transfer,用于解决MySQL主从同步延迟的问题,从MySQL单线程到多线程的工作模式.可以观看@丁奇的相关资料: MySQL多线程同步-Trans ...
- Bootloader和Root
1. Unlock Bootloader是解除系统启动加载器(Bootloader)的原厂限制, 让用户可以使用到更多的功能(如刷新内核.刷ROM.修改超频....) Bootloader(系统启动加 ...
- ubuntu下禁用和恢复触摸板
1.一般禁用选项在 settings > mouse and touchpad 中.(16.04通过实验)如果无法禁用或者希望恢复,向下看. 2.命令行键入: xinput ,插卡touchpa ...
- ubuntu更新出错--Could not get lock /var/lib/dpkg/lock
ubuntu在vps上安装好后,通常第一个命令是更新系统软件.然而在运行的过程中,却出现这样的错误: E: Could not get lock /var/lib/dpkg/lock - open ( ...
- Quartus调用Modelsim SE避免重复编译Altera器件库的方法
最近用Quartus 15.0配合Modelsim SE 10.4的64位版本,简直就是闪电一般的仿真速度.但是众所周知,SE版本最大的问题就是每次由Quartus自动调用时,都要重新编译所使用的器件 ...
- [elk]Mutate filter plugin增删改查字段
Mutate filter plugin参考: https://www.elastic.co/guide/en/logstash/current/plugins-filters-mutate.html ...
- gzexe加密 脚本
sh-4.1# vi GZEXE.sh sh-4.1# cat GZEXE.sh #!/bin/bash echo "gzexe加密实验!!!" >> Cgzexe.l ...
- centos 安装部署ftp服务器
0. 安装ftp yum install vsftpd 1. 添加ftp账户 useradd -d /home/test -g ftp -s /sbin/nologin test 命令的意思: 添加t ...
- LeetCode -- 推断链表中是否有环
思路: 使用两个节点.slow和fast,分别行进1步和2步.假设有相交的情况,slow和fast必定相遇:假设没有相交的情况,那么slow或fast必定有一个为null 相遇时有两种可能:1. 仅仅 ...
- 深入分析 iBATIS 框架之系统架构与映射原理
iBATIS 框架主要的类层次结构 总体来说 iBATIS 的系统结构还是比较简单的,它主要完成两件事情: 根据 JDBC 规范建立与数据库的连接: 通过反射打通 Java 对象与数据库参数交互之间相 ...