vue路由跳转页面滚动到顶部

如果想在vue路由跳转后滚动到指定的位置，只需要调用内置方法（scrollBehavior）官网地址链接: https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

VUE 2.X

import VueRouter from 'vue-router'
Vue.use(VueRouter)
 
//vue2.0 new VueRouter({}) 创建路由实例
const router= new VueRouter({
  routes,
  //配置滚动行为，跳转到新的路由界面滚动条的位置
  scrollBehavior () {
    return { x: 0, y: 0 }
  }
})

VUE 3.X

import { createRouter, createWebHashHistory } from 'vue-router'

// vue3.0 creatRouter({}) 创建路由实例
const router = createRouter({
  // 使用hash的路由模式
  history: createWebHashHistory(),
  routes,
  // 每次切换路由的时候滚动到页面顶部
  scrollBehavior () {
    return { left: 0, top: 0 }
  }
})

注意: 这个功能只在支持 history.pushState 的浏览器中可用。
这里要特别注意里面的参数不一样：
vue2.0 x y 控制
vue3.0 left top 控制

今日一句： 遇见问题不要慌抽根烟，看官网。