vue2

8.vue/高阶/2.归纳.md

@@ -0,0 +1,152 @@
+## 路由
+
+1. vue-router
+
+- vue2.0 => 3
+- vue3.0 => 4
+- 安装：npm install vue-router@3 --save
+- vuex: npm install vuex --save
+
+2. router.js
+
+- 引入页面路径
+- 将路径挂载到路由上
+
+```
+  {
+      path:"/路径",
+      component: 引入页面路径的名称
+  }
+```
+
+3. App.vue
+
+```
+    跳转标签：
+    router-link
+    属性：
+        to:跳转路径地址
+        active-class="active" 添加选中样式
+    占位标签：
+    router-view
+```
+
+4. 多级路由
+
+- router.js
+
+  1. 引入路径
+  2. 在 children 属性中添加路由
+  3. path 路径不要加：/
+
+- router-link
+  - to 的路径完整的路径
+
+5. 路由的重定向
+
+```
+  {
+    path:'/',
+    redirect: '/list'
+  }
+```
+
+6. 路由命名
+
+- router.js
+
+* name:"xxx"
+
+```
+     <router-link active-class="active" :to="{name:'xxx'}"></router-link>
+```
+
+7. query 传参
+
+```
+     <router-link active-class="active" :to="{
+        path:'/list',
+        query:{
+          names: '小郑',
+          age: 30
+        }
+      }" >去列表</router-link>
+```
+```
+    <router-link active-class="active" :to="`/list?names=小郑&age=30`" >去列表</router-link>
+  
+```
+接收query传参
+    * this.$route.query
+
+8. params传参
+```
+    动态绑定时 路由是name名称 不能是path
+      <router-link active-class="active" :to="{
+        name:'detail',
+        params: {
+          name1:'Lucy',
+          age1: 10
+        }
+      }">去详情</router-link>
+```
+```
+    router.js页面
+     {
+        路由中动态绑定参数名
+        path:'/detail/:name1/:age1',
+        name:"detail",
+        component: Detail
+     }
+     页面
+        to属性中直接传参
+      <router-link active-class="active" to="/detail/小A/10" >去详情</router-link>
+```
+接收params参数
+    * this.$route.params
+
+9. 编程式导航
+作用:更加灵活的跳转路由
+this.$router.push("路径")
+this.$router.go(数字) 
+this.$router.back() 返回
+this.$router.forward() 前进
+
+10. 路由懒加载
+()=>import('../components/vase1.vue')
+
+* 按需加载 提升性能
+
+11. 组件缓存
+keep-alive
++ . 什么都不写 全部缓存
++ . include 单独缓存 注意：组件一定要起名
++ . 多个缓存 :include="['xxx','ccc']"
+
+生命周期
+```
+  activated() {
+    组件被调用时激活
+  },
+  deactivated() {
+    组件被销毁时激活
+  },
+```
+
+12. 路由守卫
+开启路由守卫页面 meta:{isAuth:true}
+1. 全局路由守卫：
++ 前置路由 beforeEach
++ 后置路由 afterEach
+2. 独享路由守卫：
++ beforeEnter
+3. 组件路由守卫:
++ 进入组件beforeRouteEnter
++ 离开组件beforeRouteLeave
+
+13. 路由模式
+两种模式：
+   + history 
+        美观、干净、安全、速度没有hash快
+   + hash
+        有"#"，不是很美观、速度快  

8.vue/高阶/my-project/src/App.vue

@@ -7,9 +7,32 @@
     <button @click="getMain">获取</button>-->
     <!-- 声明式导航 -->
     <div id="nav">
-      <router-link active-class="active" to="/home">首页</router-link>
-      <router-link active-class="active" to="/list">列表</router-link>
-      <router-link active-class="active" to="/my">我的</router-link>
+      <!-- params -->
+      <!-- <router-link active-class="active" to="/home/喜羊羊/7">首页</router-link> -->
+      <router-link push active-class="active" :to="{
+        name:'shouye',
+        params:{
+          name1:'佳佳',
+          age1:21
+        }
+      }">首页</router-link>
+      <!-- 
+        传参：
+        query
+        params
+        params相对于query传参安全  没有数据泄露
+        但是刷新的时候 params数据会丢失
+       -->
+      <router-link push active-class="active" to="/list">列表</router-link>
+      <!-- query -->
+      <!-- <router-link active-class="active" to="/my?name=图图&age=3">我的</router-link> -->
+      <router-link push active-class="active" :to="{
+        path:'/my',
+        name:'wode',
+        query:{
+          name:'懒羊羊'
+        }
+      }">我的</router-link>
     </div>
     <!-- 占位符 -->
     <div id="main">

8.vue/高阶/my-project/src/components/Demo1.vue

@@ -1,13 +1,33 @@
 <template>
   <div id="demo">
-    <h1>这是第一个案例</h1>
+    <h1>男装</h1>
+    <input type="text" />
+    <button @click="goToMy">我的</button>
   </div>
 </template>
 
 <script>
 export default {
-
-}
+  name: "demo1",
+  methods: {
+    goToMy() {
+      // this.$router.go(2)
+      // this.$router.back()
+      this.$router.forward();
+    }
+  },
+  beforeRouteEnter(to, from, next) {
+    if (localStorage.getItem("user2") === "瑶一瑶") {
+      next();
+    } else {
+      alert("氪金");
+    }
+  },
+  beforeRouteLeave(to, from, next) {
+    console.log("就不让你走")
+    next()
+  }
+};
 </script>
 
 <style scoped>

8.vue/高阶/my-project/src/components/Demo2.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="demo">
     <h1>女装</h1>
+    <input type="text" name="" id="">
     <ul>
       <li>
         <a href>1</a>
@@ -16,7 +17,15 @@
 </template>
   
   <script>
-export default {};
+export default {
+  name:"demo2",
+  activated() {
+    console.log("激活")
+  },
+  deactivated() {
+    console.log("停用")
+  } 
+};
 </script>
   
 <style scoped lang="scss">

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

@@ -9,8 +9,8 @@ Vue.use(VueRouter);
 import Home from '../views/Home.vue';
 import My from '../views/My.vue';
 import List from '../views/List.vue';
-import Demo1 from '@/components/Demo1.vue';
-import Demo2 from '@/components/Demo2.vue';
+// import Demo1 from '@/components/Demo1.vue';
+// import Demo2 from '@/components/Demo2.vue';
 
 // 2.路由路径
 const routes = [
@@ -22,12 +22,23 @@ const routes = [
     {
         // 路径
         path:"/home",
+        // path:"/home/:name1/:age1",
         // 组件页面
-        component: Home
+        component: Home,
+        name:"shouye",
+
     },
     {
         path:'/my',
-        component: My
+        component: My,
+        name:"wode",
+        beforeEnter:(to,from,next) => {
+            if(localStorage.getItem("user1") === '瑶瑶') {
+                next()
+            } else {
+                alert("充钱")
+            }
+        }
     },
     {
         path:'/list',
@@ -39,11 +50,12 @@ const routes = [
             },
             {
                 path:'demo1',
-                component:Demo1
+                meta:{isAuthor:true,title:"男装"},
+                component:()=>import("../components/Demo1.vue")
             },
             {
                 path:'demo2',
-                component:Demo2
+                component:()=>import("../components/Demo2.vue")
             }
         ]
     }
@@ -58,4 +70,25 @@ const router = new VueRouter({
     routes
 })
 
+// 全局前置路由守卫
+router.beforeEach((to,from,next)=>{
+    // 1.to 目标对象从...来
+    // 2.form 目标对象从...走
+    // 3.next 下一步
+    console.log(to,'to')
+    if(to.meta.isAuthor) {
+        if(localStorage.getItem("user") === '图图') {
+            next()
+        } else {
+            alert("请登录")
+        }
+    } else {
+        next()
+    }
+})
+// 全局后置路由守卫
+router.afterEach((to,from,next)=>{
+    document.title = to.meta.title || '项目';
+})
+
 export default router;

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

@@ -1,11 +1,21 @@
 <template>
   <div class="home">
     主页
+    <h3>{{ $route.params.name1 }}</h3>
+    <button @click="goToList">去列表</button>
   </div>
 </template>
 
 <script>
 export default {
+  created() {
+    console.log(this.$route)
+  },
+  methods:{
+    goToList() {
+      this.$router.push('/list')
+    }
+  }
 
 }
 </script>

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

@@ -1,20 +1,21 @@
 <template>
-    <div class="List">
-      <h1>列表</h1>
-      <router-link  active-class="active" to="/list/demo1">男装</router-link>
-      <router-link  active-class="active" to="/list/demo2">女装</router-link>
-      <router-view></router-view>
-    </div>
-  </template>
+  <div class="List">
+    <h1>列表</h1>
+    <router-link active-class="active" to="/list/demo1">男装</router-link>
+    <router-link active-class="active" to="/list/demo2">女装</router-link>
+    <!-- <keep-alive :include="['demo1']"> -->
+  <keep-alive :exclude="['demo1']">
+    <router-view></router-view>
+   </keep-alive>
+  </div>
+</template>
   
   <script>
-  export default {
-  
-  }
-  </script>
+export default {};
+</script>
   
   <style scoped lang="scss">
-    .active {
-      color: yellowgreen;
-    }
-  </style>
+.active {
+  color: yellowgreen;
+}
+</style>

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

@@ -1,15 +1,16 @@
 <template>
-    <div class="my">
-      我的
-    </div>
-  </template>
+  <div class="my">我的
+    <h3>{{ $route.query.name }}</h3>
+  </div>
+</template>
   
   <script>
-  export default {
-  
+export default {
+  created() {
+    console.log(this.$route)
   }
-  </script>
+};
+</script>
   
   <style>
-  
-  </style>
+</style>