day:33

day32/project/src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <h2>vue路由</h2>
     <!-- 跳转路由 to 跳转的路径 -->
-    <router-link to="/">首页</router-link>
+    <router-link to="/home">首页</router-link>
     <br>
     <router-link to="/list">列表</router-link>
     <br>

day32/project/src/components/vase1.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h1>第一个页面</h1>
+    <ul>
+        <li>
+            <input type="text">
+        </li>
+        <br>
+        <li>
+            <input type="text">
+        </li>
+        <br>
+        <li>
+            <input type="text">
+        </li>
+        <br>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+    name:'vase1',
+    // 进入
+    beforeRouteEnter (to, from, next) {
+        // ...
+        console.log("进入")
+        if(localStorage.getItem("cc")==="333") {
+            next()
+        } else {
+            alert("并未进入")
+        }
+    },
+    // 离开
+    beforeRouteLeave (to, from, next) {
+        // ...
+        console.log("离开")
+        next()
+    }
+}
+</script>
+
+<style>
+
+</style>

day32/project/src/components/vase2.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <h1>第二个页面</h1>
+    <h3 :style="{opacity}">北京欢迎你</h3>
+    <ul>
+        <li>
+            <input type="text">
+        </li>
+        <br>
+        <li>
+            <input type="text">
+        </li>
+        <br>
+        <li>
+            <input type="text">
+        </li>
+        <br>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+    name:'vase2',
+    data(){
+        return{
+            opacity:1
+        }
+    },
+    // keep-alive专属生命周期
+    // 组件被激活时调用
+    activated() {
+        console.log("组件被激活")
+       this.timer = setInterval(()=>{
+            this.opacity -= 0.01;
+            if(this.opacity <= 0) {
+                this.opacity = 1
+            }
+        },20)
+    },
+    // 组件被销毁时调用
+    deactivated() {
+        console.log("组件被销毁")
+        clearInterval(this.timer)
+    }
+}
+</script>
+
+<style>
+
+</style>

day32/project/src/router/index.js

@@ -13,17 +13,54 @@ import Add from '../components/add.vue'
 // 实例化
 Vue.use(VueRouter)
 
+// 路由守卫
+// 1.全局路由守卫
+// beforeEach 前置路由守卫
+// afterEach  后置路由守卫
+// 2.独享路由守卫：守卫哪写在哪
+// beforeEnter
+// 3.组建内的路由守卫 =>components/vase1.vue
+// 进入守卫 beforeRouteEnter 
+// 离开守卫 beforeRouteLeave
 const routes = [
   {
     path:'/',
     name: 'home',
-    component: home    
+    component: home   
+  },
+  {
+    path:'/home',
+    name: 'home',
+    component: home,
+    // 路由重定向 redirect
+    redirect:'/',
+    children:[
+      {
+        path:'vase1',
+        component:()=>import("../components/vase1.vue")
+      },
+      {
+        path:'vase2',
+        component:()=>import("../components/vase2.vue"),
+        meta:{title:"第二页"},
+        beforeEnter: (to, from, next) => {
+          // ...
+          console.log("开始独享")
+          if(localStorage.getItem("bb")==="222") {
+            next();
+          } else {
+            alert("人员信息不存在")
+          }
+        }
+      },
+    ]
   },
   // 1.先配置路由的路径：path 2.起名字 3.存放路径页面
   {
     path:"/list",
     // name: 'list',
     component: Vase,
+    meta:{isAuth:true,title:'列表页'},
     // 二级路由/多级路由
     children:[
       {
@@ -41,7 +78,8 @@ const routes = [
   {
     path: '/new',
     // 路由的懒加载
-    component:()=>import("../views/New.vue")
+    component:()=>import("../views/New.vue"),
+    meta:{title:"新页面"}
   }
   // {
   //   path:'/new',
@@ -56,3 +94,27 @@ const router = new VueRouter({
 })
 
 export default router
+
+// 全局中前置路由守卫
+router.beforeEach((to,from,next)=>{
+  // 1.to => 进入的目标对象
+  // 2.from => 离开的目标对象
+  // 3.next => 下一步所执行的内容
+  if(to.meta.isAuth) {
+    console.log("进入1")
+    if(localStorage.getItem("aa")==="111") {
+      next()
+    } else {
+      alert("当前用户未登录")
+    }
+  } else {
+    next()
+  }
+})
+
+// 全局中后置路由守卫
+router.afterEach((to,from,next)=>{
+  console.log("进入2");
+  document.title = to.meta.title || '路由守卫' 
+
+})

day32/project/src/views/home.vue

@@ -1,18 +1,27 @@
 <template>
   <div>
     首页内容
+    <br />
+    <router-link active-class="active" to="/home/vase1">第一页</router-link
+    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    <router-link active-class="active" to="/home/vase2">第二页</router-link>
+    <!-- 组件缓存:keep-alive 离开页面时 内容不被销毁 
+      属性：include 包含需要组件缓存的组件 
+      单独绑定：include="vase1"
+      多个绑定：:include="['vase1','vase2']"
+     -->
+    <keep-alive :include="['vase1','vase2']">
+      <router-view></router-view>
+    </keep-alive>
   </div>
 </template>
 
 <script>
 export default {
-    name:"home"
+  name: "home",
 
-    // npm install vue-router@3
-
-}
+  // npm install vue-router@3
+};
 </script>
 
-<style>
-
-</style>
+<style></style>

day33/笔记.md

@@ -0,0 +1,14 @@
+## 路由重定向 redirect =>router/index.js
+## 组件缓存   keepAlive =>views/home.vue
+## 专属生命周期 activated/deactivated => components/vase2.vue
+## 路由守卫： router/index.js
+## 路由的两种工作模式：哈希（hash）/history
+<!-- 
+  区别  hash => # 
+        1.不美观 兼容性好
+        2.不走服务器
+        history => url路径
+        1.美观 兼容性不强
+        2.走服务器
+
+ -->