// 导入Vue框架的核心库,它是整个Vue项目构建的基础,后续很多功能的实现(如创建组件、使用插件、构建页面等)都依赖于Vue提供的各种API和机制,是必不可少的核心依赖项。
import Vue from 'vue';
// 导入Vue Router库,Vue Router是Vue.js官方的路由管理器,用于在单页面应用(SPA)中实现页面之间的路由切换,通过定义不同的路由路径以及对应的组件,能够让用户在访问不同的URL时加载相应的页面内容,实现页面导航功能。
import Router from 'vue-router';
// 从 '../config/router.config' 文件中导入 'constantRouterMap',从命名推测它应该是一个包含了常量路由信息的数组或者对象,里面定义了应用的一些基础的、不会动态变化的路由配置,例如首页路由、登录路由等固定的路由规则,每个路由配置通常包含路径(path)、对应的组件(component)以及其他一些如路由元数据(meta)等相关信息。
import { constantRouterMap } from '../config/router.config';

// 使用Vue.use()方法将Vue Router插件注册到Vue实例中,这样在整个Vue项目里就能使用Vue Router提供的路由相关功能了,例如在组件中使用 <router-view> 展示路由对应的组件,使用 <router-link> 来创建路由链接等,这是启用Vue Router功能的必要步骤。
Vue.use(Router);

// 导出一个新创建的Vue Router实例,作为整个项目的路由配置对象,其他模块可以导入这个路由配置来挂载到Vue根实例上,从而让整个应用具备路由功能。
export default new Router({
  // 设置路由的模式为 'history',这种模式下,URL看起来更像传统的多页面应用的URL(没有 '#' 符号),它使用浏览器的历史记录API来实现路由切换,使得页面的URL更加美观、易读且符合搜索引擎优化(SEO)的要求,但需要服务器端进行相应的配置来支持,避免出现刷新页面找不到资源等问题。
  mode: 'history',
  // 设置路由的基础路径,它的值通常来自于项目的构建环境配置(process.env.BASE_URL),例如在项目部署到特定的子路径下时,这个基础路径就会发挥作用,确保路由能够正确地匹配到对应的资源和页面,保证路由功能的正常运行。
  base: process.env.BASE_URL,
  // 定义滚动行为函数,这里返回的是一个对象 { y: 0 },意味着当路由切换时,页面在垂直方向(y轴)上的滚动位置会被重置为0,也就是每次切换路由后页面都会滚动到顶部,当然可以根据实际需求修改这个函数来实现更复杂的滚动行为控制,比如根据不同路由保存或恢复滚动位置等。
  scrollBehavior: () => ({ y: 0 }),
  // 将前面导入的 'constantRouterMap' 作为路由配置的 routes 属性值,也就是把预定义好的那些常量路由信息添加到路由配置中,让Vue Router知道有哪些路由路径以及对应的组件等信息,以便在用户访问不同URL时能够正确地匹配并加载相应的页面组件。
  routes: constantRouterMap
})