'admin-12.25:新增路由配置，实现页面跳转'

vue-admin-wonderful-next-docs/docs/config/README.md

@@ -270,3 +270,86 @@ createApp(App).use(ElementPlus).mount('#app')
 ::: tip 提示
 请移步顶部导航 `主题` 中查看详细内容
 :::
+
+## 安装 vue-router-next
+#### 1、cmd 安装
+
+- [vue-router-next 代码仓库（github）](https://github.com/vuejs/vue-router-next)
+- [vue-router-next 文档地址](https://next.router.vuejs.org/)
+
+```bash
+cnpm install vue-router@4 --save
+```
+
+#### 2、页面中使用
+
+- 2.1、页面下新增文件夹 `src/router/index.ts`
+
+index.ts 中写入：
+
+```ts
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
+
+const staticRoutes: Array<RouteRecordRaw> = [
+    {
+        path: '/',
+        name: 'home',
+        component: () => import('/@/views/layout/index.vue'),
+        redirect: '/home',
+        meta: {
+            title: '首页'
+        },
+        children: [{
+            path: '/home',
+            name: 'home',
+            component: () => import('/@/views/home/index.vue'),
+            meta: {
+                title: '首页'
+            }
+        }]
+    },
+    {
+        path: '/login',
+        name: 'login',
+        component: () => import('/@/views/login/index.vue'),
+        meta: {
+            title: '登陆'
+        }
+    },
+    {
+        path: '/:pathMatch(.*)',
+        redirect: '/'
+    }
+]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: staticRoutes
+})
+
+export default router
+```
+
+- 2.2、main.ts 中引入 `src/router/index.ts`
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+import ElementPlus from 'element-plus'
+import 'element-plus/lib/theme-chalk/index.css'
+import '/@/theme/index.scss'
+import { locale } from 'element-plus'
+
+createApp(App).use(router).use(ElementPlus, { locale }).mount('#app')
+```
+
+- 2.3、页面测试
+地址栏输入 2.1 中的路由地址 `http://localhost:8080/#/login`，出现 `login` 中的文字就证明配置成功了。
+
+::: tip 提示
+地址栏带 `#号` 与不带 `#号` ，参考：[next.router history-mode.html](https://next.router.vuejs.org/guide/essentials/history-mode.html)
+
+访问路由器和内部的当前路由 setup：[Vue路由器和Composition API](https://next.router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup)
+:::

vue-admin-wonderful-next-docs/docs/guide/README.md

@@ -3,3 +3,15 @@
 VuePress is composed of two parts: a [minimalistic static site generator](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/core) with a Vue-powered [theming system](https://v1.vuepress.vuejs.org/theme/) and [Plugin API](https://v1.vuepress.vuejs.org/plugin/), and a [default theme](https://v1.vuepress.vuejs.org/theme/default-theme-config.html) optimized for writing technical documentation. It was created to support the documentation needs of Vue's own sub projects.
 
 Each page generated by VuePress has its own pre-rendered static HTML, providing great loading performance and is SEO-friendly. Once the page is loaded, however, Vue takes over the static content and turns it into a full Single-Page Application (SPA). Additional pages are fetched on demand as the user navigates around the site.
+
+帮助你获取最新的开发文档：
+
+- [vue3.0 中文文档地址]: https://vue3js.cn/docs/zh/
+- [element-plus 中文文档地址]: https://element-plus.org/#/zh-CN
+- [composition-Api 中文文档地址]: https://composition-api.vuejs.org/zh/
+- [vue-router-next 文档地址]: https://next.router.vuejs.org/
+- [next.vuex 文档地址]: https://next.vuex.vuejs.org/
+- [vite 源码]: https://github.com/vitejs/vite
+- [vite 中文文档地址（非官方版本）]: https://vite-design.surge.sh/guide/chinese-doc.html
+- [vue-i18n-next]: https://vue-i18n-next.intlify.dev/
+- [composition-api-vue-i18n-next]: https://vue-i18n-next.intlify.dev/advanced/composition.html#local-scope

vue-admin-wonderful-next-docs/docs/update/README.md

@@ -2,6 +2,9 @@
 sidebar: auto
 ---
 # 更新日志
+## 2020-12-25
+- 新增 路由配置及编写对应开发文档
+
 ## 2020-12-22
 - 处理 [element-plus](https://element-plus.gitee.io/#/zh-CN/component/icon) 打包后字体图标 404 问题
 - 编写 对应 `3.x` 主题文档编写

vue-admin-wonderful-next/package.json

@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "element-plus": "^v1.0.1-beta.14",
-    "vue": "^3.0.4"
+    "vue": "^3.0.4",
+    "vue-router": "^4.0.1"
   },
   "devDependencies": {
     "@vue/compiler-sfc": "^3.0.4",

vue-admin-wonderful-next/src/main.ts

@@ -1,10 +1,11 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 
 import ElementPlus from 'element-plus'
 import 'element-plus/lib/theme-chalk/index.css'
 import '/@/theme/index.scss'
-import locale from 'element-plus/lib/locale/lang/zh-cn'
+import { locale } from 'element-plus'
 
-createApp(App).use(ElementPlus, { size: 'small', locale }).mount('#app')
+createApp(App).use(router).use(ElementPlus, { locale }).mount('#app')
 

vue-admin-wonderful-next/src/router/index.ts

@@ -1 +1,40 @@
-const dd: string = ''
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
+
+const staticRoutes: Array<RouteRecordRaw> = [
+    {
+        path: '/',
+        name: 'home',
+        component: () => import('/@/views/layout/index.vue'),
+        redirect: '/home',
+        meta: {
+            title: '首页'
+        },
+        children: [{
+            path: '/home',
+            name: 'home',
+            component: () => import('/@/views/home/index.vue'),
+            meta: {
+                title: '首页'
+            }
+        }]
+    },
+    {
+        path: '/login',
+        name: 'login',
+        component: () => import('/@/views/login/index.vue'),
+        meta: {
+            title: '登陆'
+        }
+    },
+    {
+        path: '/:pathMatch(.*)',
+        redirect: '/'
+    }
+]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: staticRoutes
+})
+
+export default router

vue-admin-wonderful-next/src/utils/formatTime.ts

@@ -0,0 +1,118 @@
+/*
+ * 年(Y) 可用1-4个占位符
+ * 月(m)、日(d)、小时(H)、分(M)、秒(S) 可用1-2个占位符
+ * 星期(W) 可用1-3个占位符
+ * 季度(q为阿拉伯数字，Q为中文数字)可用1或4个占位符
+ *
+ * let date = new Date()
+ * formatDate(date, "YYYY-mm-dd HH:MM:SS")           // 2020-02-09 14:04:23
+ * formatDate(date, "YYYY-mm-dd HH:MM:SS Q")         // 2020-02-09 14:09:03 一
+ * formatDate(date, "YYYY-mm-dd HH:MM:SS WWW")       // 2020-02-09 14:45:12 星期日
+ * formatDate(date, "YYYY-mm-dd HH:MM:SS QQQQ")      // 2020-02-09 14:09:36 第一季度
+ * formatDate(date, "YYYY-mm-dd HH:MM:SS WWW QQQQ")  // 2020-02-09 14:46:12 星期日 第一季度
+ */
+export function formatDate(date: Date, format: string) {
+    let we = date.getDay() // 星期
+    let qut = Math.floor((date.getMonth() + 3) / 3).toString() // 季度
+    const opt: any = {
+        "Y+": date.getFullYear().toString(), // 年
+        "m+": (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
+        "d+": date.getDate().toString(), // 日
+        "H+": date.getHours().toString(), // 时
+        "M+": date.getMinutes().toString(), // 分
+        "S+": date.getSeconds().toString(), // 秒
+        "q+": qut, // 季度
+    }
+    // 中文数字 (星期)
+    const week: any = {
+        "0": "日",
+        "1": "一",
+        "2": "二",
+        "3": "三",
+        "4": "四",
+        "5": "五",
+        "6": "六",
+    }
+    // 中文数字（季度）
+    const quarter: any = {
+        "1": "一",
+        "2": "二",
+        "3": "三",
+        "4": "四",
+    }
+    if (/(W+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? RegExp.$1.length > 2 ? "星期" + week[we] : "周" + week[we] : week[we])
+    if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? "第" + quarter[qut] + "季度" : quarter[qut])
+    for (let k in opt) {
+        let r = new RegExp("(" + k + ")").exec(format);
+        // 若输入的长度不为1，则前面补零
+        if (r) format = format.replace(r[1], RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, "0"))
+    }
+    return format
+}
+
+/**
+ * 10秒：  10 * 1000
+ * 1分：   60 * 1000
+ * 1小时： 60 * 60 * 1000
+ * 24小时：60 * 60 * 24 * 1000
+ * 3天：   60 * 60* 24 * 1000 * 3
+ *
+ * let data = new Date()
+ * formatPast(data)                                           // 刚刚
+ * formatPast(data - 11 * 1000)                               // 11秒前
+ * formatPast(data - 2 * 60 * 1000)                           // 2分钟前
+ * formatPast(data - 60 * 60 * 2 * 1000)                      // 2小时前
+ * formatPast(data - 60 * 60 * 2 * 1000)                      // 2小时前
+ * formatPast(data - 60 * 60 * 71 * 1000)                     // 2天前
+ * formatPast("2020-06-01")                                   // 2020-06-01
+ * formatPast("2020-06-01", "YYYY-mm-dd HH:MM:SS WWW QQQQ")   // 2020-06-01 08:00:00 星期一 第二季度
+ */
+export function formatPast(param: any, format: string = "YYYY-mm-dd") {
+    // 传入格式处理、存储转换值
+    let t: any, s: any
+    // 获取js 时间戳
+    let time: any = new Date().getTime()
+    // 是否是对象
+    typeof param === "string" || "object" ? (t = new Date(param).getTime()) : (t = param)
+    // 当前时间戳 - 传入时间戳
+    time = Number.parseInt(`${time - t}`)
+    if (time < 10000) {
+        // 10秒内
+        return "刚刚";
+    } else if (time < 60000 && time >= 10000) {
+        // 超过10秒少于1分钟内
+        s = Math.floor(time / 1000);
+        return `${s}秒前`;
+    } else if (time < 3600000 && time >= 60000) {
+        // 超过1分钟少于1小时
+        s = Math.floor(time / 60000);
+        return `${s}分钟前`;
+    } else if (time < 86400000 && time >= 3600000) {
+        // 超过1小时少于24小时
+        s = Math.floor(time / 3600000);
+        return `${s}小时前`;
+    } else if (time < 259200000 && time >= 86400000) {
+        // 超过1天少于3天内
+        s = Math.floor(time / 86400000);
+        return `${s}天前`;
+    } else {
+        // 超过3天
+        let date = typeof param === "string" || "object" ? new Date(param) : param;
+        return formatDate(date, format);
+    }
+}
+
+/**
+ * formatAxis(new Date())   // 上午好
+ */
+export function formatAxis(param: any) {
+    let hour: number = new Date(param).getHours()
+    if (hour < 6) return "凌晨好"
+    else if (hour < 9) return "早上好"
+    else if (hour < 12) return "上午好"
+    else if (hour < 14) return "中午好"
+    else if (hour < 17) return "下午好"
+    else if (hour < 19) return "傍晚好"
+    else if (hour < 22) return "晚上好"
+    else return "夜里好"
+}

vue-admin-wonderful-next/src/views/home/index.vue

@@ -0,0 +1,9 @@
+<template>
+home
+</template>
+
+<script lang="ts">
+export default {
+  name: "home",
+};
+</script>

vue-admin-wonderful-next/src/views/layout/index.vue

@@ -0,0 +1,10 @@
+<template>
+  layout
+  <router-view></router-view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "layout",
+};
+</script>

vue-admin-wonderful-next/src/views/login/index.vue

@@ -0,0 +1,3 @@
+<template>
+  login
+</template>

vue-admin-wonderful-next/src/views/login/mock.ts

@@ -0,0 +1,32 @@
+export const classicQuotationsList: Array<object> = [
+    {
+        name: '颜渊',
+        comeFrom: '论语',
+        content: '自己不喜欢的，就不要强加给别人。饥寒是自己不喜欢的，不要把它强加给别人；耻辱是自己不喜欢的，也不要把它强加给别人。将心比心，推己及人，从自己的利与害想到对别人的利与害，多替别人着想，这是终生应该奉行的原则。'
+    },
+    {
+        name: '荀子',
+        comeFrom: '劝学',
+        content: '木料经过木工用墨线（木工用具）划直线加工以后，就变直了；金属物品在磨刀石上磨砺后，就能锋利。人经过学习磨练，自我反省，就会变得聪慧明智，不犯错误，也越来越坚强。'
+    },
+    {
+        name: '里仁',
+        comeFrom: '论语',
+        content: '见到贤人，就应该想着向他学习；看见不贤的人，便应该自己反省，对不如自己的人喜欢讥笑、轻视，因而沾沾自喜；对比自己强的人喜欢贬低，甚至嫉妒、畏惧退缩，害怕与他们交往：这都是不正确的态度。'
+    },
+    {
+        name: '述而',
+        comeFrom: '论语',
+        content: '君子心地平坦宽广，小人却经常局促忧愁。君子襟怀坦白，安贫乐业，与人为善，知足常乐，所以能坦荡荡。小人欲念太多，患得患失，忧心忡忡，怨天尤人，局促不安，所以常心怀戚戚。'
+    },
+    {
+        name: '老子',
+        comeFrom: '第六十四章',
+        content: '千里遥远的路程是从脚下第一步开始的。任何事情的成功都是从头开始，从小到大逐渐积累的。万事开头难，没有个开头就不会有结果。任何事情都要从一点一滴的小事开始做起。'
+    },
+    {
+        name: '朱熹',
+        comeFrom: '训学斋规',
+        content: '读书有三到，谓心到，眼到，口到。心不在此，则眼看不仔细，心眼既不专一，却只漫浪诵读，决不能记，久也不能久也。三到之中，心到最急，心既到矣，眼口岂不到乎？'
+    }
+]