vue3的守卫滚动和懒加载

import {createRouter,createWebHashHistory} from 'vue-router'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

// import Home from '@/views/Home.vue'
// import Users from '@/views/user/Users.vue'
// import UserStart from '@/views/user/UserStart.vue'
// import UserDetail from '@/views/user/UserDetail.vue'
// import UserEdit from '@/views/user/UserEdit.vue'
// import NotFound from '@/views/notFound/index.vue'

//通过一下方式定义即为懒加载，上面直接导入的话，打包后集中在一个文件内，下面打包后分成很多小文件，按需加载
const Home = () => import('@/views/Home.vue')
const Users = () => import('@/views/user/Users.vue')
const UserStart = () => import('@/views/user/UserStart.vue')
const UserDetail = () => import('@/views/user/UserDetail.vue')
const UserEdit = () => import('@/views/user/UserEdit.vue')
const NotFound = () => import('@/views/notFound/index.vue')


const routes = [
  {
    path: '/',
    components: {
      default: Home,
      "router-view-header": Header,
      "router-view-footer": Footer,
    }

  },
  {
    path: '/users',
    components: {
      default: Users,
      "router-view-header": Header,
      "router-view-footer": Footer,
    },

    children: [
      {
        path: '',
        components: {
          default: UserStart,
          "users-alert": import('@/components/UsersAlert..vue'),
        },
      },
      {
        name:'userDetail',
        path: ':id',
        component: UserDetail,
        props:true,
      },
      {
        name:'userEdit',
        path: ':id/edit',
        component: UserEdit,
        props: (route) => ({
          id:route.params.id,
          name:route.query.name,
          age:18,
          level:'五级'
        })
      },
    ],
    meta : {
      title:'用户管理',
    }

  },
  {
    path: '/:notFound(.*)',
    components: {
      default: NotFound,
      "router-view-header": Header,
      "router-view-footer": Footer,
    },
    name:'notFound',
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  linkActiveClass: 'active',

  // 以下scrollBehavior函数就是守卫滚动，控制滚动行为,当切换路由时,滚动到顶部，当点击浏览器返回按钮时，滚动到上次的位置

  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }

})

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})


export default router