feat: 增加页面导航

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "vue": "^3.2.25",
+    "vue-router": "4",
     "vuex": "^4.0.2"
   },
   "devDependencies": {

src/App.vue

@@ -3,38 +3,29 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-12 17:58:56
  * @lastEditors: uray(1109489444@qq.com)
- * @lastEditTime: 2022-04-13 17:07:52
+ * @lastEditTime: 2022-04-14 09:55:14
  * @FilePath: \toy_box_website\src\App.vue
 -->
 <template>
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <HelloWorldVue msg="Hello Vue 3 + TypeScript + Vite" />
-    <span>新使用的 store : {{ appName }}</span>
+    <router-view />
 </template>
 
 <script lang="ts">
-import HelloWorldVue from "./components/HelloWorld.vue";
-import store from "./store";
-
-export default {
-    components: {
-        HelloWorldVue,
+import { defineComponent } from "@vue/runtime-core";
+export default defineComponent({
+    name: "App",
+    created() {
+        // 更合适的使用方式是在router 里配置  path 为 / 的路由，成为默认的首页
+        // this.$router.replace("/page/home")
     },
-    computed: {
-        appName(): string {
-            return store.state.appName;
-        },
+    mounted() {
+        setTimeout(() => this.$router.replace("/page/home"), 1000);
     },
-};
+});
 </script>
 
 <style>
 #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
     margin-top: 60px;
 }
 </style>

src/main.ts

@@ -3,11 +3,12 @@
  * @Author: uray(1109489444@qq.com)
  * @date: 2022-04-12 17:58:56
  * @lastEditors: uray(1109489444@qq.com)
- * @lastEditTime: 2022-04-13 17:06:02
+ * @lastEditTime: 2022-04-13 17:27:17
  * @FilePath: \toy_box_website\src\main.ts
  */
 import { createApp } from "vue";
 import App from "./App.vue";
+import { router } from "./router";
 import store from "./store";
 
-createApp(App).use(store).mount("#app");
+createApp(App).use(store).use(router).mount("#app");

src/page/detail/index.vue

@@ -0,0 +1,27 @@
+<!--
+ * @description: 
+ * @Author: uray(1109489444@qq.com)
+ * @date: 2022-04-13 17:29:36
+ * @lastEditors: uray(1109489444@qq.com)
+ * @lastEditTime: 2022-04-14 09:47:50
+ * @FilePath: \toy_box_website\src\page\detail\index.vue
+-->
+
+<template>
+    <div class="detailPage" @click="$router.back()">新的页面, 点击返回</div>
+</template>
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+    name: "Detail",
+});
+</script>
+<style scoped>
+.detailPage {
+    width: 100vw;
+    height: 100vh;
+    background-color: yellowgreen;
+    cursor: pointer;
+}
+</style>

src/page/home/index.vue

@@ -0,0 +1,30 @@
+<!--
+ * @description: 
+ * @Author: uray(1109489444@qq.com)
+ * @date: 2022-04-13 18:00:09
+ * @lastEditors: uray(1109489444@qq.com)
+ * @lastEditTime: 2022-04-14 14:06:53
+ * @FilePath: \toy_box_website\src\page\home\index.vue
+-->
+
+<template>
+    <div @click="onBtnClick">
+        <h1>首页</h1>
+        <div @click="onBtnClick">点击跳转详情页面</div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+    name: "Home",
+    methods: {
+        onBtnClick() {
+            this.$router.push({ path: "/page/detail" });
+        },
+    },
+});
+</script>
+
+<style></style>

src/router/index.ts

@@ -0,0 +1,32 @@
+/**
+ * @description:
+ * @Author: uray(1109489444@qq.com)
+ * @date: 2022-04-13 17:15:34
+ * @lastEditors: uray(1109489444@qq.com)
+ * @lastEditTime: 2022-04-14 09:57:12
+ * @FilePath: \toy_box_website\src\router\index.ts
+ */
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
+// 1. 定义路由组件.
+// 也可以从其他文件导入
+import Detail from "../page/detail/index.vue";
+import Home from "../page/home/index.vue";
+
+// 2. 定义一些路由
+// 每个路由都需要映射到一个组件。
+// 我们后面再讨论嵌套路由。
+const routes: RouteRecordRaw[] = [
+    { name: "home", path: "/page/home", component: Home },
+    { name: "detail", path: "/page/detail", component: Detail },
+];
+
+// 3. 创建路由实例并传递 `routes` 配置
+// 你可以在这里输入更多的配置，但我们在这里
+// 暂时保持简单
+const router = createRouter({
+    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
+    history: createWebHashHistory(),
+    routes, // `routes: routes` 的缩写
+});
+
+export { router };

yarn.lock

@@ -153,7 +153,7 @@
     "@vue/compiler-dom" "3.2.32"
     "@vue/shared" "3.2.32"
 
-"@vue/devtools-api@^6.0.0-beta.11":
+"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.11":
   version "6.1.4"
   resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz#b4aec2f4b4599e11ba774a50c67fa378c9824e53"
   integrity sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
@@ -904,6 +904,13 @@ vscode-vue-languageservice@0.29.8:
     vscode-pug-languageservice "0.29.8"
     vscode-typescript-languageservice "0.29.8"
 
+vue-router@4:
+  version "4.0.14"
+  resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.14.tgz#ce2028c1c5c33e30c7287950c973f397fce1bd65"
+  integrity sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0"
+
 vue-tsc@^0.29.8:
   version "0.29.8"
   resolved "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-0.29.8.tgz#f4d8de5dd8756107c878489ccf9178d2d72fff47"