在使用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无效的问题的更多相关文章

  1. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  2. Vue路由scrollBehavior滚动行为控制锚点

    使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意: 这个功能只 ...

  3. vue-router scrollBehavior无效的问题及解决方案

    在使用vue做单页面应用开发时候 使用vue-router作为路由控制器  在使用过程中发现每个页面打开都在原来的位置 不能返回到页面顶部位置 ,然后查看api文档 滚动行为  发现如下代码: con ...

  4. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  5. vue Router——进阶篇

    vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...

  6. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  7. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  8. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  10. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

随机推荐

  1. C编程测试存储格式为大段还是小段

    目前,计算机存储系统有2种存储格式,大端和小端.数据在内存中存储时以字节为单位,一个int类型有4个字节,这就导致是高字节对应低地址(大端模式),高字节对应高地址(小端模式).大端和小端模式本身没有对 ...

  2. cadence orcad查找技巧

    本文讲述了如何在OrCAD原理图中根据元件位号或者元件值快速查找元件的两种方法. 方法一:在.obj页面的“File”标签下查找元件. 方法二:在.obj页面的“Hierarchy”标签下查找元件. ...

  3. JavaScript判断浏览器类型及版本(新增IE11)

    $(function () { var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/rv:( ...

  4. js基本知识3

    1. 函数 function 函数的声明 函数的 调用 函数的传参 2. 函数返回值 Return 返回结果 返回给函数 Id 函数 function $id(id) { return documen ...

  5. doc转docx以及type对应的类型

    https://blog.csdn.net/flagang/article/details/51454665 // 作为type格式保存到临时文件 // *Variant(0):doc // *Var ...

  6. 实现在edittext中任意插入图片

    Myedittext: public class MyEditText extends EditText { public MyEditText(Context context) { super(co ...

  7. Unity3D学习(十一):关于UI销毁后图集仍然无法释放问题的解决办法

    前言 最近进行项目性能优化的时候发现的问题. 问题 从大厅进到单局的过程中,会经过选择英雄和加载两个流程,这两个流程对应的UI界面都会有一张几mb左右的贴图作为背景,在进入单局游戏后这两个UI已经销毁 ...

  8. 一款基于jQuery带事件记录的日历插件

    之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮.今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展开事件记录窗口, ...

  9. Spring的AOP简单理解

    最近在研究spring的AOP,翻译出来的意思是面向切面. 总结如下: 所谓AOP就是将分散在各个方法处的公共代码提取到一处, 并通过类似拦截器的机制实现代码的动态整合.可以简单地想象成, 在某个方法 ...

  10. PHP,JavaScript,CSS三种HTML内嵌语言的语法,变量,循环,函数记录

    PHP PHP简介: PHP 是服务器端脚本语言. PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器")是一种通用开源脚本语言. PH ...