diff --git a/vue2-tutorials/single-file/demo2/package.json b/vue2-tutorials/single-file/demo2/package.json
index e3791b4..139cd93 100644
--- a/vue2-tutorials/single-file/demo2/package.json
+++ b/vue2-tutorials/single-file/demo2/package.json
@@ -10,6 +10,7 @@
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
+ "vue-router": "3",
"vuex": "3"
},
"devDependencies": {
diff --git a/vue2-tutorials/single-file/demo2/pnpm-lock.yaml b/vue2-tutorials/single-file/demo2/pnpm-lock.yaml
index f6abc18..358332f 100644
--- a/vue2-tutorials/single-file/demo2/pnpm-lock.yaml
+++ b/vue2-tutorials/single-file/demo2/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
vue:
specifier: ^2.6.14
version: 2.7.16
+ vue-router:
+ specifier: '3'
+ version: 3.6.5(vue@2.7.16)
vuex:
specifier: '3'
version: 3.6.2(vue@2.7.16)
@@ -3575,6 +3578,11 @@ packages:
vue:
optional: true
+ vue-router@3.6.5:
+ resolution: {integrity: sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==}
+ peerDependencies:
+ vue: ^2
+
vue-style-loader@4.1.3:
resolution: {integrity: sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==}
@@ -7700,6 +7708,10 @@ snapshots:
'@vue/compiler-sfc': 3.5.16
vue: 2.7.16
+ vue-router@3.6.5(vue@2.7.16):
+ dependencies:
+ vue: 2.7.16
+
vue-style-loader@4.1.3:
dependencies:
hash-sum: 1.0.2
diff --git a/vue2-tutorials/single-file/demo2/public/index.html b/vue2-tutorials/single-file/demo2/public/index.html
index 3e5a139..acccd74 100644
--- a/vue2-tutorials/single-file/demo2/public/index.html
+++ b/vue2-tutorials/single-file/demo2/public/index.html
@@ -1,15 +1,35 @@
-
-
-
-
+
+
+
+
+
+
+
<%= htmlWebpackPlugin.options.title %>
diff --git a/vue2-tutorials/single-file/demo2/src/App.vue b/vue2-tutorials/single-file/demo2/src/App.vue
index a0aa594..8fb360d 100644
--- a/vue2-tutorials/single-file/demo2/src/App.vue
+++ b/vue2-tutorials/single-file/demo2/src/App.vue
@@ -6,7 +6,7 @@
-->
-
+
@@ -15,11 +15,12 @@
// import Demo2 from "@/views/demo2/index.vue";
// import Demo3 from "@/views/demo3/index.vue";
// import Demo4 from "@/views/demo4/index.vue";
-import Demo5 from "@/views/demo5/index.vue";
+// import Demo5 from "@/views/demo5/index.vue";
+import Demo6 from "@/views/demo6/index.vue";
export default {
name: "App",
// components: { Demo1, Demo2, Demo3 },
- components: { Demo5 },
+ components: { Demo6 },
};
diff --git a/vue2-tutorials/single-file/demo2/src/main.js b/vue2-tutorials/single-file/demo2/src/main.js
index a5e5c4d..295fc6e 100644
--- a/vue2-tutorials/single-file/demo2/src/main.js
+++ b/vue2-tutorials/single-file/demo2/src/main.js
@@ -1,10 +1,15 @@
import Vue from "vue";
+import VueRouter from "vue-router";
import App from "./App.vue";
+import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
+Vue.use(VueRouter);
+
new Vue({
render: (h) => h(App),
store,
+ router,
}).$mount("#app");
diff --git a/vue2-tutorials/single-file/demo2/src/router/index.js b/vue2-tutorials/single-file/demo2/src/router/index.js
new file mode 100644
index 0000000..3f2113d
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/router/index.js
@@ -0,0 +1,16 @@
+import VueRouter from "vue-router";
+
+const router = new VueRouter({
+ routes: [
+ {
+ path: "/about",
+ component: () => import("@/views/demo6/components/About.vue"),
+ },
+ {
+ path: "/home",
+ component: () => import("@/views/demo6/components/Home.vue"),
+ },
+ ],
+});
+
+export default router;
diff --git a/vue2-tutorials/single-file/demo2/src/views/demo6/components/About.vue b/vue2-tutorials/single-file/demo2/src/views/demo6/components/About.vue
new file mode 100644
index 0000000..ab37cff
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/views/demo6/components/About.vue
@@ -0,0 +1,11 @@
+
+
+
About内容
+
+
+
+
diff --git a/vue2-tutorials/single-file/demo2/src/views/demo6/components/Home.vue b/vue2-tutorials/single-file/demo2/src/views/demo6/components/Home.vue
new file mode 100644
index 0000000..cb458d4
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/views/demo6/components/Home.vue
@@ -0,0 +1,11 @@
+
+
+
Home内容
+
+
+
+
diff --git a/vue2-tutorials/single-file/demo2/src/views/demo6/index.vue b/vue2-tutorials/single-file/demo2/src/views/demo6/index.vue
new file mode 100644
index 0000000..8578910
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/views/demo6/index.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+ about
+
+ home
+
+
+
+
+
+
+