|
|
|
@ -1,71 +1,113 @@
|
|
|
|
|
|
|
|
// 导入Vue构造函数，Vue是Vue.js框架的核心，用于创建Vue实例以及进行各种组件化开发相关操作
|
|
|
|
import Vue from 'vue'
|
|
|
|
import Vue from 'vue'
|
|
|
|
|
|
|
|
// 导入Vue Router插件，Vue Router用于在Vue.js应用中实现路由功能，管理不同页面（路由组件）之间的切换和导航
|
|
|
|
import Router from 'vue-router'
|
|
|
|
import Router from 'vue-router'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 使用Vue.use方法来安装Vue Router插件，使其能够在Vue应用中被使用，这一步是必要的初始化操作
|
|
|
|
Vue.use(Router)
|
|
|
|
Vue.use(Router)
|
|
|
|
|
|
|
|
|
|
|
|
/* Layout */
|
|
|
|
/* Layout */
|
|
|
|
|
|
|
|
// 从指定的路径 '../views/layout/Layout' 导入一个名为Layout的组件，通常这个组件可能是整个应用的布局框架组件，包含侧边栏、顶部导航栏等通用布局结构，其他页面组件会在这个布局框架内进行展示
|
|
|
|
import Layout from '../views/layout/Layout'
|
|
|
|
import Layout from '../views/layout/Layout'
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
|
|
|
|
* 以下是一段注释，用于对路由配置对象中的一些属性进行说明，方便后续理解和维护路由配置
|
|
|
|
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
|
|
|
|
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
|
|
|
|
|
|
|
|
* 解释：如果路由配置中的 `hidden` 属性设置为 `true`，则对应的路由对应的菜单项将不会显示在侧边栏中（默认值为 `false`，即默认会显示在侧边栏）
|
|
|
|
|
|
|
|
*
|
|
|
|
* alwaysShow: true if set true, will always show the root menu, whatever its child routes length
|
|
|
|
* alwaysShow: true if set true, will always show the root menu, whatever its child routes length
|
|
|
|
* if not set alwaysShow, only more than one route under the children
|
|
|
|
* if not set alwaysShow, only more than one route under the children
|
|
|
|
* it will becomes nested mode, otherwise not show the root menu
|
|
|
|
* it will becomes nested mode, otherwise not show the root menu
|
|
|
|
|
|
|
|
* 解释：如果 `alwaysShow` 属性设置为 `true`，无论该路由下的子路由数量是多少，都会始终显示根菜单。如果不设置这个属性，只有当子路由数量大于1时，才会呈现嵌套菜单模式（显示根菜单以及子菜单），否则不会显示根菜单。
|
|
|
|
|
|
|
|
*
|
|
|
|
* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb
|
|
|
|
* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb
|
|
|
|
|
|
|
|
* 解释：如果 `redirect` 属性设置为 `noredirect`，在面包屑导航中不会进行重定向操作（通常面包屑导航会根据路由跳转情况进行相应的更新显示，这里可用于特殊情况的控制）
|
|
|
|
|
|
|
|
*
|
|
|
|
* name:'router-name' the name is used by <keep-alive> (must set!!!)
|
|
|
|
* name:'router-name' the name is used by <keep-alive> (must set!!!)
|
|
|
|
|
|
|
|
* 解释：`name` 属性用于给路由命名，这个名称会被 `<keep-alive>` 组件使用（必须设置，在进行组件缓存等相关功能时需要通过这个名称来识别路由对应的组件）
|
|
|
|
|
|
|
|
*
|
|
|
|
* meta : {
|
|
|
|
* meta : {
|
|
|
|
title: 'title' the name show in submenu and breadcrumb (recommend set)
|
|
|
|
title: 'title' the name show in submenu and breadcrumb (recommend set)
|
|
|
|
icon: 'svg-name' the icon show in the sidebar,
|
|
|
|
icon: 'svg-name' the icon show in the sidebar,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
* 解释：`meta` 是一个自定义的元数据对象，可以在路由配置中添加额外的信息。其中 `title` 属性用于设置在子菜单和面包屑导航中显示的名称（建议设置，方便用户直观了解当前页面信息），`icon` 属性用于指定在侧边栏中显示的图标（方便通过图标区分不同的菜单功能）
|
|
|
|
**/
|
|
|
|
**/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 定义一个名为constantRouterMap的常量数组，用于存放基础的、固定不变的路由配置信息，这些路由通常是应用中始终存在且不需要动态加载的部分
|
|
|
|
export const constantRouterMap = [
|
|
|
|
export const constantRouterMap = [
|
|
|
|
|
|
|
|
// 定义一个登录页面的路由配置对象，路径为 '/login'，对应的组件通过动态导入的方式加载（使用 () => import('@/views/login/index') 这种语法，会在实际访问该路由时才加载对应的组件代码，提高初始加载性能），并且设置 `hidden` 属性为 `true`，意味着这个登录页面不会显示在侧边栏中
|
|
|
|
{path: '/login', component: () => import('@/views/login/index'), hidden: true},
|
|
|
|
{path: '/login', component: () => import('@/views/login/index'), hidden: true},
|
|
|
|
|
|
|
|
// 定义一个404页面的路由配置对象，路径为 '/404'，同样通过动态导入加载对应的组件，也设置 `hidden` 属性为 `true`，该页面不会在侧边栏展示，一般用于处理未匹配到的路由情况
|
|
|
|
{path: '/404', component: () => import('@/views/404'), hidden: true},
|
|
|
|
{path: '/404', component: () => import('@/views/404'), hidden: true},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 定义一个根路径（空字符串表示应用的根路径）的路由配置，它会作为应用的基础布局框架
|
|
|
|
path: '',
|
|
|
|
path: '',
|
|
|
|
|
|
|
|
// 指定该根路径对应的组件为之前导入的Layout组件，也就是整个页面的布局框架会围绕这个组件展开
|
|
|
|
component: Layout,
|
|
|
|
component: Layout,
|
|
|
|
|
|
|
|
// 设置重定向路径为 '/home'，意味着当访问根路径时，会自动跳转到 '/home' 这个子路径对应的页面
|
|
|
|
redirect: '/home',
|
|
|
|
redirect: '/home',
|
|
|
|
|
|
|
|
// 在路由的元数据（meta）中设置标题为 '首页'，图标为 'home'，这两个信息会分别用于侧边栏菜单的显示和面包屑导航等地方的展示
|
|
|
|
meta: {title: '首页', icon: 'home'},
|
|
|
|
meta: {title: '首页', icon: 'home'},
|
|
|
|
children: [{
|
|
|
|
// 定义该路由下的子路由数组，每个子路由对应一个具体的页面组件
|
|
|
|
path: 'home',
|
|
|
|
children: [
|
|
|
|
name: 'home',
|
|
|
|
{
|
|
|
|
component: () => import('@/views/home/index'),
|
|
|
|
// 子路由的路径为 'home'，也就是在根路径下访问 'home' 会对应这个路由配置
|
|
|
|
meta: {title: '仪表盘', icon: 'dashboard'}
|
|
|
|
path: 'home',
|
|
|
|
},
|
|
|
|
// 给这个路由命名为 'home'，用于后续的路由导航、组件缓存等相关操作
|
|
|
|
{
|
|
|
|
name: 'home',
|
|
|
|
name: 'document',
|
|
|
|
// 通过动态导入加载对应的组件，这里对应的是 '@/views/home/index' 这个页面组件，一般是应用的仪表盘页面之类的主页面
|
|
|
|
path: 'https://www.macrozheng.com',
|
|
|
|
component: () => import('@/views/home/index'),
|
|
|
|
meta: {title: '学习教程', icon: 'document'}
|
|
|
|
// 在子路由的元数据中设置标题为 '仪表盘'，图标为 'dashboard'，同样用于展示相关信息
|
|
|
|
},
|
|
|
|
meta: {title: '仪表盘', icon: 'dashboard'}
|
|
|
|
{
|
|
|
|
},
|
|
|
|
name: 'video',
|
|
|
|
{
|
|
|
|
path: 'https://www.macrozheng.com/mall/catalog/mall_video.html',
|
|
|
|
// 给这个路由命名为 'document'，路径是一个外部链接 'https://www.macrozheng.com'，可能用于跳转到外部学习教程网站
|
|
|
|
meta: {title: '视频教程', icon: 'video'}
|
|
|
|
name: 'document',
|
|
|
|
},
|
|
|
|
path: 'https://www.macrozheng.com',
|
|
|
|
|
|
|
|
// 在元数据中设置标题为 '学习教程'，图标为 'document'，用于侧边栏等地方显示相关信息
|
|
|
|
|
|
|
|
meta: {title: '学习教程', icon: 'document'}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
// 给这个路由命名为 'video'，路径是另一个外部链接 'https://www.macrozheng.com/mall/catalog/mall_video.html'，可能用于跳转到外部视频教程页面
|
|
|
|
|
|
|
|
name: 'video',
|
|
|
|
|
|
|
|
path: 'https://www.macrozheng.com/mall/catalog/mall_video.html',
|
|
|
|
|
|
|
|
// 在元数据中设置标题为 '视频教程'，图标为 'video'，用于展示相关信息
|
|
|
|
|
|
|
|
meta: {title: '视频教程', icon: 'video'}
|
|
|
|
|
|
|
|
},
|
|
|
|
]
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 定义一个名为asyncRouterMap的常量数组，用于存放需要动态加载的路由配置信息，通常这些路由对应的模块可能比较大，或者是根据用户权限等情况动态决定是否加载的部分
|
|
|
|
export const asyncRouterMap = [
|
|
|
|
export const asyncRouterMap = [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 定义一个商品管理模块（pms）相关的路由配置，路径为 '/pms'，对应的组件是之前导入的Layout组件作为布局框架
|
|
|
|
path: '/pms',
|
|
|
|
path: '/pms',
|
|
|
|
component: Layout,
|
|
|
|
component: Layout,
|
|
|
|
|
|
|
|
// 设置重定向路径为 '/pms/product'，访问 '/pms' 时会自动跳转到商品列表页面相关的子路由
|
|
|
|
redirect: '/pms/product',
|
|
|
|
redirect: '/pms/product',
|
|
|
|
|
|
|
|
// 给这个路由命名为 'pms'，方便后续操作识别
|
|
|
|
name: 'pms',
|
|
|
|
name: 'pms',
|
|
|
|
|
|
|
|
// 在路由的元数据中设置标题为 '商品'，图标为 'product'，用于侧边栏菜单等地方显示
|
|
|
|
meta: {title: '商品', icon: 'product'},
|
|
|
|
meta: {title: '商品', icon: 'product'},
|
|
|
|
children: [{
|
|
|
|
// 定义该路由下的子路由数组，包含商品管理相关的各个具体功能页面的路由配置
|
|
|
|
path: 'product',
|
|
|
|
children: [
|
|
|
|
name: 'product',
|
|
|
|
|
|
|
|
component: () => import('@/views/pms/product/index'),
|
|
|
|
|
|
|
|
meta: {title: '商品列表', icon: 'product-list'}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 商品列表页面的子路由，路径为 'product'，命名为 'product'，通过动态导入加载对应的组件，用于展示商品列表信息
|
|
|
|
|
|
|
|
path: 'product',
|
|
|
|
|
|
|
|
name: 'product',
|
|
|
|
|
|
|
|
component: () => import('@/views/pms/product/index'),
|
|
|
|
|
|
|
|
meta: {title: '商品列表', icon: 'product-list'}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
// 添加商品页面的子路由，命名为 'addProduct'，通过动态导入加载对应组件，用于添加商品的操作页面
|
|
|
|
path: 'addProduct',
|
|
|
|
path: 'addProduct',
|
|
|
|
name: 'addProduct',
|
|
|
|
name: 'addProduct',
|
|
|
|
component: () => import('@/views/pms/product/add'),
|
|
|
|
component: () => import('@/views/pms/product/add'),
|
|
|
|
meta: {title: '添加商品', icon: 'product-add'}
|
|
|
|
meta: {title: '添加商品', icon: 'product-add'}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 修改商品页面的子路由，命名为 'updateProduct'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，意味着这个页面不会显示在侧边栏等常规菜单中，可能是通过其他方式（比如在商品列表页点击编辑按钮进入）访问
|
|
|
|
path: 'updateProduct',
|
|
|
|
path: 'updateProduct',
|
|
|
|
name: 'updateProduct',
|
|
|
|
name: 'updateProduct',
|
|
|
|
component: () => import('@/views/pms/product/update'),
|
|
|
|
component: () => import('@/views/pms/product/update'),
|
|
|
|
@ -73,12 +115,14 @@ export const asyncRouterMap = [
|
|
|
|
hidden: true
|
|
|
|
hidden: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 商品分类页面的子路由，命名为 'productCate'，通过动态导入加载对应组件，用于商品分类管理相关操作
|
|
|
|
path: 'productCate',
|
|
|
|
path: 'productCate',
|
|
|
|
name: 'productCate',
|
|
|
|
name: 'productCate',
|
|
|
|
component: () => import('@/views/pms/productCate/index'),
|
|
|
|
component: () => import('@/views/pms/productCate/index'),
|
|
|
|
meta: {title: '商品分类', icon: 'product-cate'}
|
|
|
|
meta: {title: '商品分类', icon: 'product-cate'}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 添加商品分类页面的子路由，命名为 'addProductCate'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不会在常规菜单显示，可能是特定操作下进入的页面
|
|
|
|
path: 'addProductCate',
|
|
|
|
path: 'addProductCate',
|
|
|
|
name: 'addProductCate',
|
|
|
|
name: 'addProductCate',
|
|
|
|
component: () => import('@/views/pms/productCate/add'),
|
|
|
|
component: () => import('@/views/pms/productCate/add'),
|
|
|
|
@ -86,6 +130,7 @@ export const asyncRouterMap = [
|
|
|
|
hidden: true
|
|
|
|
hidden: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 修改商品分类页面的子路由，命名为 'updateProductCate'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，同样不在常规菜单展示，用于特定的修改操作入口
|
|
|
|
path: 'updateProductCate',
|
|
|
|
path: 'updateProductCate',
|
|
|
|
name: 'updateProductCate',
|
|
|
|
name: 'updateProductCate',
|
|
|
|
component: () => import('@/views/pms/productCate/update'),
|
|
|
|
component: () => import('@/views/pms/productCate/update'),
|
|
|
|
@ -93,12 +138,14 @@ export const asyncRouterMap = [
|
|
|
|
hidden: true
|
|
|
|
hidden: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 商品类型页面的子路由，命名为 'productAttr'，通过动态导入加载对应组件，用于管理商品类型相关功能
|
|
|
|
path: 'productAttr',
|
|
|
|
path: 'productAttr',
|
|
|
|
name: 'productAttr',
|
|
|
|
name: 'productAttr',
|
|
|
|
component: () => import('@/views/pms/productAttr/index'),
|
|
|
|
component: () => import('@/views/pms/productAttr/index'),
|
|
|
|
meta: {title: '商品类型', icon: 'product-attr'}
|
|
|
|
meta: {title: '商品类型', icon: 'product-attr'}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 商品属性列表页面的子路由，命名为 'productAttrList'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不常规显示，可能是特定的查看属性列表的入口
|
|
|
|
path: 'productAttrList',
|
|
|
|
path: 'productAttrList',
|
|
|
|
name: 'productAttrList',
|
|
|
|
name: 'productAttrList',
|
|
|
|
component: () => import('@/views/pms/productAttr/productAttrList'),
|
|
|
|
component: () => import('@/views/pms/productAttr/productAttrList'),
|
|
|
|
@ -106,6 +153,7 @@ export const asyncRouterMap = [
|
|
|
|
hidden: true
|
|
|
|
hidden: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 添加商品属性页面的子路由，命名为 'addProductAttr'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不是常规菜单可见的页面，用于添加商品属性操作入口
|
|
|
|
path: 'addProductAttr',
|
|
|
|
path: 'addProductAttr',
|
|
|
|
name: 'addProductAttr',
|
|
|
|
name: 'addProductAttr',
|
|
|
|
component: () => import('@/views/pms/productAttr/addProductAttr'),
|
|
|
|
component: () => import('@/views/pms/productAttr/addProductAttr'),
|
|
|
|
@ -113,6 +161,7 @@ export const asyncRouterMap = [
|
|
|
|
hidden: true
|
|
|
|
hidden: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 修改商品属性页面的子路由，命名为 'updateProductAttr'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不在常规菜单展示，用于修改商品属性的操作入口
|
|
|
|
path: 'updateProductAttr',
|
|
|
|
path: 'updateProductAttr',
|
|
|
|
name: 'updateProductAttr',
|
|
|
|
name: 'updateProductAttr',
|
|
|
|
component: () => import('@/views/pms/productAttr/updateProductAttr'),
|
|
|
|
component: () => import('@/views/pms/productAttr/updateProductAttr'),
|
|
|
|
@ -120,12 +169,14 @@ export const asyncRouterMap = [
|
|
|
|
hidden: true
|
|
|
|
hidden: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 品牌管理页面的子路由，命名为 'brand'，通过动态导入加载对应组件，用于品牌管理相关操作，比如查看、编辑品牌等
|
|
|
|
path: 'brand',
|
|
|
|
path: 'brand',
|
|
|
|
name: 'brand',
|
|
|
|
name: 'brand',
|
|
|
|
component: () => import('@/views/pms/brand/index'),
|
|
|
|
component: () => import('@/views/pms/brand/index'),
|
|
|
|
meta: {title: '品牌管理', icon: 'product-brand'}
|
|
|
|
meta: {title: '品牌管理', icon: 'product-brand'}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 添加品牌页面的子路由，命名为 'addBrand'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不是常规显示的页面，用于添加品牌的操作入口
|
|
|
|
path: 'addBrand',
|
|
|
|
path: 'addBrand',
|
|
|
|
name: 'addBrand',
|
|
|
|
name: 'addBrand',
|
|
|
|
component: () => import('@/views/pms/brand/add'),
|
|
|
|
component: () => import('@/views/pms/brand/add'),
|
|
|
|
@ -133,6 +184,7 @@ export const asyncRouterMap = [
|
|
|
|
hidden: true
|
|
|
|
hidden: true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 编辑品牌页面的子路由，命名为 'updateBrand'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不在常规菜单出现，用于编辑品牌的操作入口
|
|
|
|
path: 'updateBrand',
|
|
|
|
path: 'updateBrand',
|
|
|
|
name: 'updateBrand',
|
|
|
|
name: 'updateBrand',
|
|
|
|
component: () => import('@/views/pms/brand/update'),
|
|
|
|
component: () => import('@/views/pms/brand/update'),
|
|
|
|
@ -142,6 +194,8 @@ export const asyncRouterMap = [
|
|
|
|
]
|
|
|
|
]
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
// 订单管理模块（oms）相关的路由配置，路径为 '/oms'，对应Layout组件作为布局框架，以下类似的结构都是对订单管理各功能页面路由的详细配置
|
|
|
|
|
|
|
|
|
|
|
|
path: '/oms',
|
|
|
|
path: '/oms',
|
|
|
|
component: Layout,
|
|
|
|
component: Layout,
|
|
|
|
redirect: '/oms/order',
|
|
|
|
redirect: '/oms/order',
|
|
|
|
|
