在做Vue项目的时候发现 当路由跳转时 页面是不会自动跳转到顶部的 而是停留在当前已滚动的距离 实现方法其实很简单 共有三种方法可实现页面自动跳转到顶部 在mounted生命周期添加相应的方法即可
在路由的main.js(router.js)里添加如下代码即可：方法一：
// 跳转后自动返回页面顶部 router.afterEach(() => { window.scrollTo(0,0); }) 方法二：
const router = new VueRouter({ routes:[...], scrollBehavior () { // return返回期望滚动到的位置的坐标 return { x: 0, y: 0 } } }) 方法三：
router.beforeEach((to, from, next) => { // chrome兼容 document.body.scrollTop = 0 // firefox兼容 document.documentElement.scrollTop = 0 // safari兼容 window.pageYOffset = 0 next() }) 使用示例：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ {...} ] const router = new VueRouter({ routes }) export default router // 跳转后返回页面顶部 router.afterEach(() => { window.scrollTo(0,0); }) 此外 还可在页面单独使用：
<script> export default { mounted() { // 跳转后返回页面顶部 window.scrollTo(0,0); } </script>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
