一级分类路由配置

Author: UdMLian

src/directives/index.ts

@@ -9,13 +9,13 @@ export const lazyPlugin = {
             mounted(el, binding) {
                 //el:指令绑定元素
                 //binding: bingding.value 指令等于号后面绑定的表达式的值 图片url
-                console.log(el, binding.value)
+                //console.log(el, binding.value)
                 const targetIsVisible = shallowRef(false)
                 const { stop } = useIntersectionObserver(
                     el,
                     ([entry], observerElement) => {
                         targetIsVisible.value = entry?.isIntersecting || false
-                        console.log(targetIsVisible.value)
+                        //console.log(targetIsVisible.value)
                         if (targetIsVisible.value) {
                             el.src = binding.value
                             stop()

src/router/index.ts

@@ -16,7 +16,7 @@ const router = createRouter({
           component: Home
         },
         {
-          path: 'category',
+          path: 'category/:id',
           component: Category
         }
       ]

src/views/Layout/components/LayoutFix.vue

@@ -17,7 +17,7 @@ const categoryStore = useCategoryStore()
             <!-- 导航区域 -->
             <ul class="app-header-nav">
                 <li class="home" v-for="item in categoryStore.categoryList" :key="item.id">
-                    <RouterLink to="/">{{ item.name }}</RouterLink>
+                    <RouterLink :to="`/category/${item.id}`">{{ item.name }}</RouterLink>
                 </li>
             </ul>
 

src/views/Layout/components/LayoutHeader.vue

@@ -15,7 +15,7 @@ const categoryStore = useCategoryStore()
       </h1>
       <ul class="app-header-nav">
         <li class="home" v-for="item in categoryStore.categoryList" :key="item.id">
-          <RouterLink to="/">{{ item.name }}</RouterLink>
+          <RouterLink :to="`/category/${item.id}`">{{ item.name }}</RouterLink>
         </li>
 
       </ul>