<div id="app"></div>

console.clear();
const {
  ref,
  reactive,
  readonly,
  computed,
  watch,

  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured,
  onRenderTracked,

  provide,
  inject,

  h,
  createApp,
  defineComponent,
  resolveComponent,
} = Vue;

const {createRouter, useRouter, useRoute} = VueRouter;

const Home = defineComponent({
  setup(){
    return () => h('h1', 'Home');
  },
});





const Mebel = defineComponent({
  template: `<h1>Mebel</h1>

    <pre>{{$route.params}}</pre>`,
});
const MebelCategory = defineComponent({
  template: `<h1>
    MebelCategory
  </h1>
    <pre>{{$route.params}}</pre>`,
});
const MebelArticle = defineComponent({
  template: `<h1>MebelArticle</h1>

    <pre>{{$route.params}}</pre>`,
});


const Menu = defineComponent({
  template: `<nav>Nav:
    <router-link to="/">Home</router-link>&nbsp;
    <router-link to="/catalog/mebel">/catalog/mebel</router-link>&nbsp;
    <router-link to="/catalog/mebel/page-2">/catalog/mebel/page-2</router-link>&nbsp;
    <router-link to="/catalog/mebel/stulya">/catalog/mebel/stulya</router-link>&nbsp;
    <router-link to="/catalog/mebel/stulya/page-2">/catalog/mebel/stulya/page-2</router-link>&nbsp;
    <router-link to="/catalog/mebel/stulya/stul-eames">/catalog/mebel/stulya/stul-eames</router-link>&nbsp;
    </nav>`,
});
`
/catalog/mebel
/catalog/mebel/page-2
/catalog/mebel/stulya/page-2
/catalog/mebel/stulya/stul-eames
`
const routes = [
  {
    path: '/',
    redirect: '/catalog/mebel'
  },
  {
    path: '/catalog/mebel', 
    children: [
      {
        path: 'page-:page(\\d+)?', 
        alias: '',
        component: Mebel,
      },
      {
        path: ':category', 
        children: [
          {
            path: 'page-:page(\\d+)?', 
            alias: '',
            component: MebelCategory
          },
          {
            path: ':article', 
            component: MebelArticle
          }
        ]
      },
    ], 
  }
];

const router = createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
});

createApp({
  components: {
    Menu,
  },

  setup(props, context){
    return () => h('div', [
      h(resolveComponent('menu')),
      h(resolveComponent('router-view')),
    ]);
  },
})
  .use(router)
  .mount('#app');