使用pinia和路由首位修复切换页面时滚动条不回滚的bug已经完成分类和标签页的默认选中第一个效果

src/components/BlogCard.vue

@@ -20,7 +20,7 @@
     </el-card>
 </template>
 
-<script >
+<script>
 export default {
     props: {
         blogTitle: {
@@ -65,6 +65,7 @@ export default {
     border-radius: 15px;
     margin-bottom: 20px;
     transition: .5s;
+    cursor: pointer;
 }
 
 .blog-card:hover {
@@ -74,7 +75,6 @@ export default {
 .blog-card .image {
     width: 100%;
     height: 220px;
-    cursor: pointer;
 }
 
 .blog-card .blog-title {

src/components/MyTag.vue

@@ -1,12 +1,13 @@
 <!-- 标签组件 -->
 <template>
-    <div class="my-tag" :style="{ 'background-color': color }" >
+    <div class="my-tag" :class="{ 'is-selected': isSelected }" :style="{ 'background-color': color }">
         <span class="tag-name">{{ tagName }}</span>
         <span class="tag-count">{{ tagCount }}</span>
     </div>
 </template>
 
 <script>
+import { ref } from 'vue';
 export default {
     props: {
         tagName: {
@@ -20,16 +21,22 @@ export default {
         color: {
             type: String,
             default: ''
+        },
+        isSelected: {
+            type: Boolean,
+            default: false
         }
     },
     setup(props) {
         const color = props.color;
         const tagName = props.tagName;
         const tagCount = props.tagCount;
+        const isSelected = ref(props.isSelected);
         return {
             color,
             tagName,
             tagCount,
+            isSelected
         }
     }
 }
@@ -47,7 +54,8 @@ export default {
     transition: .3s ease-out;
 }
 
-.my-tag:hover {
+.my-tag:hover,
+.my-tag.is-selected {
     background: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%) !important;
     color: #fff;
 }

src/components/category/CategoryCard.vue

@@ -6,8 +6,10 @@
             <span class="article-category">文章分类</span>
         </div>
         <div class="category-list">
-            <div class="category-item" v-for="category in categoriesArr" @click="routeToCategory(category.category)">
-                <my-tag :tagName="category.category" :tag-count="category.count" :color="getRandomColor()" />
+            <div class="category-item" v-for="(category, index) in categoriesArr"
+                @click="routeToCategory(category.category, index)">
+                <my-tag :tagName="category.category" :tag-count="category.count" :color="getRandomColor()"
+                    :isSelected="isSelected(index)" />
             </div>
 
         </div>
@@ -18,17 +20,21 @@ import { getCategories } from "@/request/api/getCategoryInfo"
 import { ref, onMounted } from "vue"
 import MyTag from '@/components/MyTag.vue';
 import { useRouter } from "vue-router";
+import { useBlogStore } from "@/store/useBlogStore";
+import { onBeforeRouteUpdate } from "vue-router";
 export default {
     components: {
         MyTag
     },
     setup() {
-        const categoriesArr = ref([])
         onMounted(() => {
             getCategories().then((result) => {
                 categoriesArr.value = result.data.data
             })
         })
+
+        const router = useRouter()
+        const categoriesArr = ref([])
         function getRandom(min, max) {
             return Math.floor(Math.random() * (max - min) + min)
         }
@@ -39,20 +45,26 @@ export default {
         function getRandomColor() {
             return colors[getRandom(0, colors.length)]
         }
-        const router = useRouter()
+        // 当前选中的元素,默认为第一个
+        // const selectedItem = ref(0)
         /**
          * 跳转到对应分类的页面
          * @param {*} category 
          */
-        function routeToCategory(category) {
+        function routeToCategory(category, index) {
+            // selectedItem.value = index
             router.push({
                 path: `/categories/${category}`
             })
         }
+        const isSelected = (index) => {
+            // return selectedItem.value === index;
+        };
         return {
             categoriesArr,
             getRandomColor,
             routeToCategory,
+            isSelected
         }
     }
 }
@@ -90,6 +102,8 @@ export default {
 .category-card .category-list .category-item {
     margin: 10px 15px;
 }
+
+
 @media (max-width: 992px) {
     .category-card .article-category-containter {
         text-align: center;

src/router/index.js

@@ -1,5 +1,6 @@
-import { createWebHistory } from 'vue-router'
-import { createRouter } from 'vue-router'
+import { createWebHistory, createRouter } from 'vue-router'
+import { useBlogStore } from "@/store/useBlogStore";
+import { createPinia, PiniaVuePlugin } from 'pinia'
 const routes = [
     {
         path: "/",
@@ -60,4 +61,46 @@ const router = createRouter({
     history: createWebHistory(),
     routes,
 })
+// 在每次切换页面的时候将页面回到顶部
+router.beforeEach((to, from, next) => {
+    let t = to.path.split("/").slice(1)
+    let f = from.path.split("/").slice(1)
+    if (t[0] === f[0]) {
+        next()
+    }
+    else {
+        window.scrollTo({
+            top: 0,
+            behavior: 'instant'
+        })    //滚动条至于浏览器顶部
+        next()
+    }
+})
+// 初始化 Pinia
+const pinia = createPinia()
+const store = useBlogStore(pinia)
+// 为分类和标签页跳转时，如果未获取到分类或标签，则自动跳转到第一个分类或标签
+router.afterEach((to, from) => {
+    if (to.path === "/categories") {
+        if (!store.firstCategory) {
+            store.getFirstCategory().then(() => {
+                router.push({ path: "/categories/" + store.firstCategory })
+            })
+        }
+        else {
+            router.push({ path: "/categories/" + store.firstCategory })
+        }
+    }
+    if (to.path === "/tags") {
+        if (!store.firstTag) {
+            store.getFirstTag().then(() => {
+                router.push({ path: "/tags/" + store.firstTag })
+            })
+        }
+        else {
+            router.push({ path: "/tags/" + store.firstTag })
+        }
+    }
+
+})
 export default router

src/store/useBlogStore.js

@@ -1,12 +1,25 @@
 import { defineStore } from 'pinia'
-
-
+import { getTags } from "@/request/api/getTagInfo"
+import { getCategories } from "@/request/api/getCategoryInfo"
 export const useBlogStore = defineStore("blog", {
     state: () => {
         return {
             // 博客数据是否获取完成
-            isBlogDataLoaded: false
+            isBlogDataLoaded: false,
+            // 标签页的首个数据
+            firstTag: "",
+            // 分类页的首个数据
+            firstCategory: "",
         }
-
+    },
+    actions: {
+        async getFirstTag() {
+            const res = await getTags()
+            this.firstTag = res.data.data[0].tag
+        },
+        async getFirstCategory() {
+            const res = await getCategories()
+            this.firstCategory = res.data.data[0].category
+        },
     }
 })