const routes = [
  {
    path: "/",
    name: "app",
    redirect: "/reactivity"
  },
  { 
    path: "/reactivity", 
    name: "reactivity", 
    meta: { title: "响应式基础" }, 
    redirect: "/reactivity/reactive",
    children: [
      { 
        path: "/reactivity/reactive", 
        name: "reactive", 
        meta: { title: "reactive" }, 
        component: () => import("@/views/reactivity/ReactiveBase.vue")
      },
      { 
        path: "/reactivity/ref", 
        name: "ref", 
        meta: { title: "ref" }, 
        component: () => import("@/views/reactivity/RefBase.vue")
      },
      { 
        path: "/reactivity/toref", 
        name: "toref", 
        meta: { title: "toRef" }, 
        component: () => import("@/views/reactivity/ToRefBase.vue")
      },
      { 
        path: "/reactivity/torefs", 
        name: "torefs", 
        meta: { title: "toRefs" }, 
        component: () => import("@/views/reactivity/ToRefsBase.vue")
      },
      { 
        path: "/reactivity/toraw", 
        name: "toraw", 
        meta: { title: "toRaw" }, 
        component: () => import("@/views/reactivity/ToRawBase.vue")
      }
    ]
  },
  { 
    path: "/computed", 
    name: "computed", 
    meta: { title: "计算属性" }, 
    redirect: "/computed/base",
    children: [
      { 
        path: "/computed/base", 
        name: "computedBase", 
        meta: { title: "computed示例" }, 
        component: () => import("@/views/computed/ComputedBase.vue")
      },
      { 
        path: "/computed/advan", 
        name: "computedAdvan", 
        meta: { title: "computed双向绑定" }, 
        component: () => import("@/views/computed/ComputedAdvan.vue")
      }
    ]
  },
  { 
    path: "/watch", 
    name: "watch", 
    meta: { title: "侦听器" }, 
    redirect: "/watch/base",
    children: [
      { 
        path: "/watch/base", 
        name: "watchBase", 
        meta: { title: "watch示例" }, 
        component: () => import("@/views/watch/WatchBase.vue")
      },
      { 
        path: "/watch/reactive", 
        name: "watchReactive", 
        meta: { title: "watch侦听响应式对象" }, 
        component: () => import("@/views/watch/WatchReactive.vue")
      },
      { 
        path: "/watch/effectbase", 
        name: "effectBase", 
        meta: { title: "watchEffect示例" }, 
        component: () => import("@/views/watch/WatchEffectBase.vue")
      },
      { 
        path: "/watch/effectinvalidate", 
        name: "effectInvalidate", 
        meta: { title: "watchEffect清除副作用函数" }, 
        component: () => import("@/views/watch/WatchEffectInvalidate.vue")
      },
      { 
        path: "/watch/callback",
        name: "watchCallback", 
        meta: { title: "watch回调的触发时机" }, 
        component: () => import("@/views/watch/WatchCallback.vue")
      },
      { 
        path: "/watch/stop", 
        name: "watchStop", 
        meta: { title: "watch停止侦听器" }, 
        component: () => import("@/views/watch/WatchStop.vue")
      }
    ]
  },
  { 
    path: "/component", 
    name: "component", 
    meta: { title: "组件" }, 
    redirect: "/component/global",
    children: [
      { 
        path: "/component/global", 
        name: "globalComponent", 
        meta: { title: "全局组件" }, 
        component: () => import("@/views/component/GlobalComponent.vue")
      },
      { 
        path: "/component/part", 
        name: "partComponent", 
        meta: { title: "局部组件" }, 
        component: () => import("@/views/component/PartComponent.vue")
      }
    ]
  }
];

export default routes;