vue路由切换如何使子路由滚动到顶部

Question

vue-cli3+element 搭建的后台管理系统，在路由切换后如果使子路由页面滚动到顶部，而不是上一个页面滚动的高度

Answer 1

import Vue from "vue"
import Router from "vue-router"Vue.use(Router)export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      path: "/",
      redirect: "/layout"
    },
    {
      path: "/login",
      name: "login",
      component: () =>
        import(/* webpackChunkName: "login" */ "./views/Login.vue")
    },
    {
      path: "/layout",
      name: "layout",
      redirect: "/home",
      component: () =>
        import(/* webpackChunkName: "layout" */ "./views/Layout.vue"),
      meta: {
        title: "layout"
      },
      children: [
        {
          path: "/home",
          name: "home",
          component: () =>
            import(/* webpackChunkName: "home" */ "./views/Home.vue"),
          meta: {
            keys: "home",
            title: "首页"
          }
        },
        {
          path: "/achievement",
          name: "achievement",
          component: () =>
            import(/* webpackChunkName: "achievement" */ "./views/Achievement.vue"),
          meta: {
            keys: "achievement",
            title: "我的业绩"
          }
        },
        {
          path: "/usermanage",
          name: "usermanage",
          component: () =>
            import(/* webpackChunkName: "usermanage" */ "./views/Usermanage.vue"),
          meta: {
            keys: "usermanage",
            title: "用户管理"
          }
        },
        {
          path: "/organization",
          name: "organization",
          component: () =>
            import(/* webpackChunkName: "organization" */ "./views/Organization.vue"),
          meta: {
            keys: "organization",
            title: "组织管理"
          }
        },
        {
          path: "/service",
          name: "service",
          component: () =>
            import(/* webpackChunkName: "service" */ "./views/Service.vue"),
          meta: {
            keys: "service",
            title: "业务报表"
          }
        },
        {
          path: "/performance",
          name: "performance",
          component: () =>
            import(/* webpackChunkName: "performance" */ "./views/Performance.vue"),
          meta: {
            keys: "service",
            title: "业绩报表"
          }
        },
        {
          path: "/violation",
          name: "violation",
          component: () =>
            import(/* webpackChunkName: "violation" */ "./views/Violation.vue"),
          meta: {
            keys: "appcenter",
            title: "违章查询"
          }
        },
        {
          path: "/statistics",
          name: "statistics",
          component: () =>
            import(/* webpackChunkName: "statistics" */ "./views/Statistics.vue"),
          meta: {
            keys: "dataservice",
            title: "查询统计"
          }
        },
        {
          path: "/account",
          name: "account",
          component: () =>
            import(/* webpackChunkName: "account" */ "./views/Account.vue"),
          meta: {
            keys: "dataservice",
            title: "结算对账"
          }
        },
        {
          path: "/helpcenter",
          name: "helpcenter",
          component: () =>
            import(/* webpackChunkName: "helpcenter" */ "./views/Helpcenter.vue"),
          meta: {
            keys: "helpcenter",
            title: "结算对账"
          }
        }
      ]
    },
    {
      path: "/about",
      name: "about",
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]
})

Answer 2

在home里 定义一个 updated（）
然后把 router  外边div 给个idupdated(
  let scrTop = document.getElementById('scrTop');
    
        scrTop.scrollTop = 0;
     
)
路由切换 都会走 updated