admin

12_vuecli/myapp/src/components/TestComp1.vue

@@ -1,5 +1,38 @@
 <template>
     <div class="comp1">
         <h1>自定义组件一</h1>
+        {{str}}
+        <h1>{{compName}}</h1>
     </div>
-</template>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            compName: 'comp1'
+        }
+    },
+    // props:['str'],
+    props:{
+        str:{
+            type:String,
+            default:'我是子组件一的默认值'
+        }
+    },
+    mounted() {
+        console.log(this.str);
+        // this.str = '我是子组件一';
+        this.compName+= this.str;
+    },
+}
+
+
+
+// let obj = {
+//     age:19,
+//     shwoAge(){
+//         console.log(this.age)
+//     }
+// }
+// obj.shwoAge()
+</script>

12_vuecli/myapp/src/router/index.js

@@ -54,7 +54,12 @@ const routes = [
   },{
     path:'/testcomp',
     name:'testcomp',
-    component:() => import("../views/TestComp.vue")
+    component:() => import("../views/TestComp.vue"),
+    beforeEnter(to, from, next){
+      // console.log(to,from,next)
+      //next(true) 和 next() 放行可以进入当前页面 否则 next('/') 跳转到首页 传入一个path跳转到指定页面 next(false) 不放行
+      next(true);
+    }
   },{
     path:'*',
     name:'error',

12_vuecli/myapp/src/views/TestComp.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="test-comp">
         <h1>组件测试页面</h1>
+        <TestComp1 str="hello world!"></TestComp1>
+        <!-- <TestComp1 v-bind:str="str1"></TestComp1> -->
         <TestComp1></TestComp1>
     </div>
 </template>
@@ -8,6 +10,24 @@
 <script>
 import TestComp1 from '@/components/TestComp1.vue'
 export default {
+    data() {
+        return {
+            str1:{
+                userName:"张三"
+            }
+        }
+    },
+    // 组件内 路由守卫 功能与路由配置文件中的beforeEnter相同
+    // to:  即将要进入的目标 路由对象
+    // from:  当前导航正要离开的路由
+    // next:  Function 一定要调用该方法来执行下一步 是否跳转页面 next(true) 和 next() 放行可以进入当前页面 否则 next('/') 跳转到首页 传入一个path跳转到指定页面 next(false) 不放行
+    // beforeRouteEnter (to, from, next) {
+    //     console.log(to, from, next)
+    // },
+    beforeRouteLeave (to, from, next) {
+        console.log(to, from, next)
+        next()
+    },
     components:{
         TestComp1
     }