vue

vue2.0/vue高阶/4.归纳.md

@@ -113,15 +113,15 @@ this.$router.back() 返回
 this.$router.forward() 前进
 
 10. 路由懒加载
-```()=>import('../components/vase1.vue')
-```
+()=>import('../components/vase1.vue')
+
 * 按需加载 提升性能
 
 11. 组件缓存
 keep-alive
-1. 什么都不写 全部缓存
-2. include 单独缓存 注意：组件一定要起名
-3. 多个缓存 :include="['xxx','ccc']"
++ . 什么都不写 全部缓存
++ . include 单独缓存 注意：组件一定要起名
++ . 多个缓存 :include="['xxx','ccc']"
 
 生命周期
 ```
@@ -131,4 +131,22 @@ keep-alive
   deactivated() {
     组件被销毁时激活
   },
-```
+```
+
+12. 路由守卫
+开启路由守卫页面 meta:{isAuth:true}
+1. 全局路由守卫：
++ 前置路由 beforeEach
++ 后置路由 afterEach
+2. 独享路由守卫：
++ beforeEnter
+3. 组件路由守卫:
++ 进入组件beforeRouteEnter
++ 离开组件beforeRouteLeave
+
+13. 路由模式
+两种模式：
+   + history 
+        美观、干净、安全、速度没有hash快
+   + hash
+        有"#"，不是很美观、速度快  

vue2.0/vue高阶/project1.0/src/components/vase1.vue

@@ -75,6 +75,19 @@ export default {
       timer: null
     };
   },
+  beforeRouteEnter (to, from, next) {
+    // ...
+    if(localStorage.getItem("user2") === "ccc") {
+        next()
+    } else {
+        alert("组件禁止进入")
+    }
+  },
+  beforeRouteLeave (to, from, next) {
+    // ...
+    console.log("就不让你走");
+    next()
+  },
   activated() {
     console.log("激活")
        this.timer = setInterval(()=>{

vue2.0/vue高阶/project1.0/src/router/index.js

@@ -10,6 +10,12 @@ import Demo1 from '../components/demo1.vue';
 import Demo2 from '../components/demo2.vue';
 // 挂载vue实例
 Vue.use(VueRouter)
+// 路由守卫
+// 1.全局路由守卫
+// 2.独享路由守卫
+// 3.组件路由守卫
+// ++++++++++++++++++++++++++++++++++++++++++++++
+// 3.
 // 自定义路由
 const routes = [
   {
@@ -29,7 +35,14 @@ const routes = [
       },
       {
         path:'vase2',
-        component:()=>import('../components/vase2.vue')
+        component:()=>import('../components/vase2.vue'),
+        beforeEnter: (to, from, next) => {
+          if(localStorage.getItem("user1") === 'bbb') {
+            next();
+          } else {
+            alert("当前用户未登录")
+          }
+        }
       }
     ]
   },
@@ -38,7 +51,8 @@ const routes = [
     path:'/detail/:name1/:age1',
     name:"detail",
     // component 组件
-    component: Detail
+    component: Detail,
+    meta:{title:"详情"}
   },
   {
     // path 路径
@@ -46,6 +60,7 @@ const routes = [
     name:"list",
     // component 组件
     component: List,
+    meta:{isAuth:true,title:"列表"},
     children:[
       {
         path:'demo1', // 不要写: "/"
@@ -58,15 +73,36 @@ const routes = [
       }
     ]
   },
-
+  
 ]
 
+
+
 // 挂载到vue-router
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
   routes
 })
+// 全局前置路由守卫
+router.beforeEach((to,from,next) => {
+  // 1.to 目标对象从...来
+  // 2.from 目标对象从...走
+  // 3.next 下一步
+  if(to.meta.isAuth) {
+    if(localStorage.getItem("user") === "aaa") {
+      next()
+    } else {
 
+      console.log("您不是该网站用户")
+    }
+  } else {
+    next();
+  }
+})
+// 全局后置路由守卫
+router.afterEach((to,form,next) => {
+  document.title = to.meta.title || 'vue项目'
+})
 // 抛出路由
 export default router