feat[ptr]: vue-router 动态路由匹配

通过 vue-router 注入的原型对象 $route 提供的路由信息

Author: ceilf6

vue2/sandboxs/src/App.vue

@@ -1,16 +1,16 @@
 <template>
   <div id="app">
-    <Pager
+    <!-- <Pager
       :current="current"
       :total="total"
       @pageChange="handlePageChange"
-    ></Pager>
+    ></Pager> -->
     <!-- Vue 会自动将 $emit 的第二个参数传给处理函数的第一个参数 -->
     <!-- @pageChange="(newPage) => handlePageChange(newPage)" -->
 
-    <p v-if="visible">v-if -> 没有vnnode -> 渲染节点数少</p>
+    <!-- <p v-if="visible">v-if -> 没有vnnode -> 渲染节点数少</p>
     <p v-show="visible">v-show -> 始终有vnode=>DOM - 稳定</p>
-    <button @click="changeVisible">切换显示</button>
+    <button @click="changeVisible">切换显示</button> -->
 
     <router-view></router-view>
     <router-link :to="{ name: 'Home' }" exact>主页</router-link>
@@ -21,10 +21,10 @@
 </template>
 
 <script>
-import { Pager } from "./components";
+// import { Pager } from "./components";
 export default {
   components: {
-    Pager,
+    // Pager,
   },
   data() {
     return {

vue2/sandboxs/src/api/blog.js

@@ -0,0 +1,22 @@
+import request from "./request";
+
+/**
+ * 获取博客列表数据
+ */
+export async function getBlogs(page = 1, limit = 10, categoryid = -1) {
+    return await request.get("/api/blog", {
+        params: {
+            page,
+            limit,
+            categoryid,
+        },
+    });
+}
+
+/**
+ * 获取博客分类
+ */
+export async function getBlogCategories() {
+    return await request.get("/api/blogtype");
+}
+

vue2/sandboxs/src/main.js

@@ -3,6 +3,8 @@ import App from './App.vue'
 
 import './styles/global.less'
 
+import './mock'      // 注意得在最开始配置mock拦截，后面目标XHR才会被扼杀
+
 import router from './router'
 import { toast } from './utils'
 Vue.prototype.$toast = toast
@@ -17,6 +19,4 @@ new Vue({
 }).$mount('#app')
 
 // ========= 测试 =========
-
-import './mock'      // 注意得在最开始配置mock拦截，后面目标XHR才会被扼杀
 // import './api/test'

vue2/sandboxs/src/mixins/fetchData.js

@@ -9,7 +9,9 @@ export default function (defaultDataValue = null) { // 不用函数的话设置
             }
         },
         async created() {
+            console.log("=== fetchData mixin created 钩子执行了");
             this.data = await this.fetchData();
+            console.log("=== fetchData mixin 获取数据完成", this.data);
             this.isLoading = false;
         }
     }

vue2/sandboxs/src/mock/blog.js

@@ -24,15 +24,18 @@ Mock.mock(/^\/api\/blog(\?.+)?$/, "get", function (options) {
             [`rows|${query.limit || 10}`]: [
                 {
                     id: "@guid",
-                    title: "@ctitle",
+                    title: "@ctitle(1, 50)",
                     description: "@cparagraph(1, 10)",
                     category: {
                         "id|1-10": 0,
                         name: "分类@id",
                     },
                     "scanNumber|0-3000": 0,
                     "commentNumber|0-300": 30,
-                    thumb: Mock.Random.image("300x250", "#000", "#fff", "Random Image"),
+                    "thumb|1": [
+                        Mock.Random.image("300x250", "#000", "#fff", "Random Image"),
+                        null,
+                    ],
                     createDate: `@date('T')`,
                 },
             ],

vue2/sandboxs/src/mock/index.js

@@ -1,10 +1,12 @@
 // AJAX 拦截规则
 // 对目标 XHR 重新赋值
 import Mock from 'mockjs'
-Mock.setup({
-    timeout: "1000-2000"
-}) // 配置延迟、模拟异步
 
 import './test'
+import './blog'
+
+// import './test2' // 等后端开发完毕后直接注释导入即可
 
-// import './test2' // 等后端开发完毕后直接注释导入即可
+Mock.setup({
+    timeout: "1000-2000"
+}) // 配置延迟、模拟异步

vue2/sandboxs/src/router/routes.js

@@ -6,6 +6,7 @@ import Message from '../views/Message'
 export default [
     { name: "Home", path: "/", component: Home }, // 一个对象就是一条匹配规则
     { name: "About", path: "/about", component: About },
-    { name: "Blog", path: "/ariticle", component: Blog },
+    { name: "Blog", path: "/article", component: Blog },
+    { name: "CategoryBlog", path: "/article/cate/:categoryId", component: Blog },
     { name: "Message", path: "/message", component: Message },
 ]

vue2/sandboxs/src/utils/formatDate.js

@@ -0,0 +1,10 @@
+export default function (timestamp) {
+    const date = new Date(+timestamp);
+    const month = (date.getMonth() + 1).toString().padStart(2, "0");
+    const day = date
+        .getDate()
+        .toString()
+        .padStart(2, "0");
+    return `${date.getFullYear()}-${month}-${day}`;
+}
+

vue2/sandboxs/src/utils/index.js

@@ -1,2 +1,3 @@
 export { default as toast } from './toast';
-export { default as getComponentRootDom } from './getComponentRootDom';
+export { default as getComponentRootDom } from './getComponentRootDom';
+export { default as formatDate } from './formatDate'

vue2/sandboxs/src/views/Blog/components/BlogCategory.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="blog-category-container" v-loading="isLoading">
+    <h2>文章分类</h2>
+    <TreeListMenu :list="list" @select="handleSelect" />
+  </div>
+</template>
+
+<script>
+import TreeListMenu from "@/components/TreeListMenu";
+import fetchData from "@/mixins/fetchData.js";
+import { getBlogCategories } from "@/api/blog.js";
+export default {
+  mixins: [fetchData([])],
+  components: {
+    TreeListMenu,
+  },
+  computed: {
+    categoryId() {
+      return +this.$route.params.categoryId || -1;
+    },
+    limit() {
+      return +this.$route.query.limit || 10;
+    },
+    list() {
+      const totalArticleCount = this.data.reduce(
+        (a, b) => a + b.articleCount,
+        0,
+      );
+      const result = [
+        { name: "全部", id: -1, articleCount: totalArticleCount },
+        ...this.data,
+      ];
+      return result.map((it) => ({
+        ...it,
+        isSelect: it.id === this.categoryId,
+        aside: `${it.articleCount}篇`,
+      }));
+    },
+  },
+  methods: {
+    async fetchData() {
+      return await getBlogCategories();
+    },
+    handleSelect(item) {
+      const query = {
+        page: 1,
+        limit: this.limit,
+      };
+      // 跳转到 当前的分类id  当前的页容量  newPage的页码
+      if (item.id === -1) {
+        this.$router.push({
+          name: "Blog",
+          query,
+        });
+      } else {
+        this.$router.push({
+          name: "CategoryBlog",
+          query,
+          params: {
+            categoryId: item.id,
+          },
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.blog-category-container {
+  width: 300px;
+  box-sizing: border-box;
+  padding: 20px;
+  position: relative;
+  height: 100%;
+  overflow-y: auto;
+  h2 {
+    font-weight: bold;
+    letter-spacing: 2px;
+    font-size: 1em;
+    margin: 0;
+  }
+}
+</style>