admin

10_vuecli/helloworld/package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "vue": "^2.6.14",
-    "vue-router": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -18,6 +19,7 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",

10_vuecli/helloworld/src/App.vue

@@ -13,7 +13,7 @@
         <router-link :to="{name:'pageone',params:{a:10,b:20}}">
           <div class="nav-item">页面一</div>
         </router-link>
-         <router-link to="/pagetwo">
+         <router-link to="/pagetw">
           <div class="nav-item">页面二</div>
         </router-link>
         <!-- <router-link to="/pagethree"> -->

10_vuecli/helloworld/src/components/ComOne.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <h1>我是组件一</h1>
+        <h1>val:{{ val }}</h1>
+        <h1>num:{{ num }}</h1>
+        <button @click="addFun">累加</button>
+    </div>
+</template>
+<script>
+    export default{
+        name:"ComOne",
+        props:["val"],
+        data(){
+            return{
+                num:10
+            }
+        },
+        methods:{
+            addFun(){
+                this.num++;
+                // 组件中不能直接修改 props 中的值
+                // 只能通过触发事件的方式让父组件修改 props 中的值
+                this.$emit("changeFun",4);
+            }
+        }
+    }
+</script>

10_vuecli/helloworld/src/main.js

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

10_vuecli/helloworld/src/router/index.js

@@ -60,6 +60,10 @@ const routes = [
         path:"/pagethree/child2/:id",
         name:"pagethreechild2",
         component: () => import("../views/PageThreeChild2.vue")
+      },{
+        path:"/pagethree/child3",
+        name:"pagethreechild3",
+        component: () => import("../views/PageThreeChild3.vue")
       }
     ]
   },{
@@ -69,6 +73,13 @@ const routes = [
     redirect:"/",
     // 别名 访问 /backhome 也会跳转到 / 首页
     alias:"/backhome"
+  },{
+    // 实现 404 页面
+    // 通配符路由 必须写在最后面
+    // 当访问的路径 都没有匹配到其他路由的时候 就会跳转到通配符路由
+    path:"*",
+    name:"error",
+    component: () => import("../views/ErrorPage.vue")
   }
 ]
 

10_vuecli/helloworld/src/store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

10_vuecli/helloworld/src/views/ErrorPage.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h1>404 页面不存在</h1>
+    </div>
+</template>

10_vuecli/helloworld/src/views/PageThree.vue

@@ -3,9 +3,11 @@
         <h1>我是页面三</h1>
         <!-- params 模式传参 地址栏中没有参数  刷新页面参数会消失-->
         <!-- query 模式传参 地址栏中会有参数  刷新页面参数不会消失-->
+        <!-- url 模式传参 地址栏中会有参数  刷新页面参数不会消失 需要同时修改路由配置文件-->
         <div>
             <router-link :to="{path:'/pagethree/child1',query:{x:100,y:200}}">子页面一</router-link>｜
-            <router-link to="/pagethree/child2/1001">子页面二</router-link>
+            <router-link to="/pagethree/child2/1001">子页面二</router-link>|
+            <router-link to="/pagethree/child3">子页面三</router-link>
         </div>
         <router-view />
     </div>

10_vuecli/helloworld/src/views/PageThreeChild3.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <h1>我是页面三子路由3</h1>
+        <!-- 使用组件 -->
+        <ComOne :val="i" @changeFun="changeVal"/>
+    </div>
+</template>
+<script>
+    // 页面中引入组件
+import ComOne from "../components/ComOne.vue";
+    export default{
+        name:"PageThreeChild3",
+        data(){
+            return{
+                i:100
+            }
+        },
+        methods:{
+            changeVal(j){
+                console.log("子组件触发了事件");
+                this.i += j;
+            }
+        },
+        components:{
+            // 注册组件
+            ComOne
+        }
+    }
+</script>