vue2

8.vue/高阶/my-project/package-lock.json

@@ -11,7 +11,8 @@
         "core-js": "^3.8.3",
         "node-sass": "^9.0.0",
         "sass-loader": "^16.0.5",
-        "vue": "^2.6.14"
+        "vue": "^2.6.14",
+        "vue-router": "^3.6.5"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -12863,6 +12864,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/vue-router": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==",
+      "license": "MIT"
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

8.vue/高阶/my-project/package.json

@@ -11,7 +11,8 @@
     "core-js": "^3.8.3",
     "node-sass": "^9.0.0",
     "sass-loader": "^16.0.5",
-    "vue": "^2.6.14"
+    "vue": "^2.6.14",
+    "vue-router": "^3.6.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

8.vue/高阶/my-project/src/main.js

@@ -1,8 +1,9 @@
 import Vue from 'vue'
 import App from './App.vue'
-
+import router from './router'
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

8.vue/高阶/my-project/src/router/index.js

@@ -0,0 +1,21 @@
+// 引入第三方库
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+// 挂载vue
+Vue.use(VueRouter);
+
+
+// 1.引入页面
+import Home from '../views/Home.vue';
+import My from '../views/My.vue';
+import List from '../views/List.vue';
+
+const routes = []
+
+const router = new VueRouter({
+    mode:'history',
+    baseURL: process.env.BASE_URL,
+    routes
+})
+
+export default router;

8.vue/高阶/my-project/src/views/Home.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="home">
+    主页
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

8.vue/高阶/my-project/src/views/List.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="List">
+      列表
+    </div>
+  </template>
+  
+  <script>
+  export default {
+  
+  }
+  </script>
+  
+  <style>
+  
+  </style>

8.vue/高阶/my-project/src/views/My.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="my">
+      我的
+    </div>
+  </template>
+  
+  <script>
+  export default {
+  
+  }
+  </script>
+  
+  <style>
+  
+  </style>