一、导航守卫

导航守卫：导航是正在发生变化的路由；从当前的组件离开准备去往下一个组件；

什么需要导航守卫？
真实项目中，我们需要根据用户权限、登录状态来决定用户可以看到的页面；但是路由就在浏览器地址栏里面，如果不加以拦截，用户通过在地址栏中输入，就可以看到他本不该看到的页面；所以我们使用导航守卫拦截它；

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.   <router-link to="/articles/1/x?name=mabin&age=18">文章1</router-link>
  10.   <button @click="toArticle">去文章1</button>
  11.   <router-view></router-view>
  12. </div>
  14. <template id="listTpl">
  15.   <div>
  16.     <div>LIST <button @click="goBack">返回</button></div>
  17.     <div>
  18.       <router-link to="/list/view">查看</router-link>
  19.       <router-link to="/list/modify">修改</router-link>
  20.     </div>
  21.     <router-view></router-view>
  22.   </div>
  23. </template>
  25. <script src="vue.js"></script>
  26. <script src="vue-router.js"></script>
  27. <script>
  28.   let home = {
  29.     template: `<div>HOME <button @click="toList">去列表</button></div>`,
  30.     methods: {
  31.       toList() {
  32.         // 用方法切路由，push 是去指定的路由
  33.         this.$router.push('/list')
  34.       }
  35.     }
  36.   };
  38.   let list = {
  39.     template: `#listTpl`,
  40.     methods: {
  41.       goBack() {
  42.         // 返回上一页（上一个组件）
  43.         this.$router.go(-1);
  44.       }
  45.     }
  46.   };
  48.   let view = {
  49.     template: `<div>查看</div>`
  50.   };
  52.   let modify = {
  53.     template: `<div>修改</div>`
  54.   };
  56.   let articles = {
  57.     template: `<div>第{{$route.params.id}}篇文章</div>`,
  58.     created() {
  59.       console.log(this.$route.params);
  60.       console.log(this.$route.query);
  61.     }
  62.   };
  63.   // /articles/1/x
  65.   let routes = [
  66.     {
  67.       name: 'articles',
  68.       path: '/articles/:id/:text',
  69.       component: articles
  70.     },
  71.     {
  72.       path: '/',
  73.       component: home
  74.     },
  75.     {
  76.       path: '/home',
  77.       component: home
  78.     },
  79.     {
  80.       path: '/list',
  81.       component: list,
  82.       children: [
  83.         {
  84.           path: 'view',
  85.           component: view
  86.         },
  87.         {
  88.           path: 'modify',
  89.           component: modify
  90.         }
  91.       ]
  92.     }
  93.   ];
  95.   let router = new VueRouter({
  96.     routes
  97.   });
  99.   // 全局前置导航守卫: 对所有的路由都生效；
  100.   router.beforeEach((to, from, next) => {
  101.     // to 路由对象，包含将要去往的路由的信息
  102.     // from 路由对象，包含了正要离开的路由的信息
  103.     // next 控制权函数，如果通过验证执行 next() 交出控制权；
  104.     console.log(to);
  105.     console.log(from);
  106.     // console.log(next);
  107.     // 在这个函数中就可以做拦截，例如从 cookie 中获取登录状态，如果登录了，执行 next() 交出控制权；
  108.     // next() 没有任何问题，交出控制权
  109.     // next(false) 中断当前导航，如果 url 发生变化，会回退到当前页面的路由
  110.     // next(路由或路由对象) 直接重定向到指定的路由
  112.     // 无论哪种情况都要执行对应的 next，如果不执行就会处于挂起状态；
  114.     let isLogin = document.cookie.includes('isLogin=true');
  115.     // debugger;
  116.     if (to.fullPath === '/list/view') {
  117.       // /list/view 假设现在不需要验证权限，所以访问 /list/view 直接放行
  118.       next()
  119.     } else {
  120.       if (isLogin) {
  121.         next()
  122.       } else {
  123.         // next('/list/view'); // 重定向到 view
  124.         next(false); // 中断导航，不能从当前页离开
  125.       }
  126.     }
  128.     // next();
  129.   });
  131.   let vm = new Vue({
  132.     el: '#app',
  133.     router,
  134.     methods: {
  135.       toArticle() {
  136.         // 点击 router-link 和执行下面的方法效果一样
  137.         this.$router.push({
  138.           name: 'articles',
  139.           params: {id: 1, text: 'x'},
  140.           query: {
  141.             name: 'mabin',
  142.             age: 18
  143.           }
  144.         })
  145.       }
  146.     }
  147.   })
  149. </script>
  150. </body>
  151. </html>

二、路由独享守卫

  1. <body>
  2. <div id="app">
  3.   <router-link to="/home">首页</router-link>
  4.   <router-link to="/about">关于</router-link>
  6.   <router-view></router-view>
  7. </div>
  9. <script src="vue.js"></script>
  10. <script src="vue-router.js"></script>
  12. <script>
  13.   let home = {
  14.     template: `<div>HOME</div>`
  15.   };
  17.   let about = {
  18.     template: `<div>About</div>`
  19.   };
  21.   // 配置路由映射表
  22.   let routes = [
  23.     {
  24.       path: '/',
  25.       component: home
  26.     },
  27.     {
  28.       path: '/home',
  29.       component: home
  30.     },
  31.     {
  32.       path: '/about',
  33.       component: about,
  34.       beforeEnter(to, from, next) {
  35.         // 路由独享守卫：配置在路由映射表中
  36.         console.log(to);
  37.         console.log(from);
  38.         console.log(next);
  39.         // 在这个钩子中做校验，如果校验通过执行 next() 否则 next(false) 或者 重定向到某一个路由；
  40.         next(); // 没问题放行
  41.         // next(false); // 中断导航
  42.         // next('/home'); // 重定向到某个路由
  44.         // 无论执行哪一种 next，都要执行一个；
  45.       }
  46.     }
  47.   ];
  49.   // 创建 VueRouter 实例
  50.   let router = new VueRouter({
  51.     routes
  52.   });
  54.   let vm = new Vue({
  55.     el: '#app',
  56.     router
  57.   })
  59. </script>
  61. </body>

三、组件内守卫

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.   <router-link to="/home">首页</router-link>
  10.   <router-link to="/about/12">关于12</router-link>
  11.   <router-link to="/about/13">关于13</router-link>
  13.   <router-view></router-view>
  14. </div>
  16. <script src="vue.js"></script>
  17. <script src="vue-router.js"></script>
  19. <script>
  20.   let home = {
  21.     template: `<div>HOME</div>`
  22.   };
  24.   let about = {
  25.     template: `<div>About</div>`,
  26.     beforeRouteEnter(to, from, next) {
  27.       // 在渲染路由对应的该组件前被调用，
  28.       // 不！能！访问 this，因为此时 vue 实例尚未创建
  29.       // to/from/next 和全局守卫一样的意义
  30.       // next();
  31.       // next(false);
  32.       // next('/home')
  33.       next();
  34.     },
  35.     beforeRouteUpdate(to, from, next) {
  36.       // 当前路由发生改变，但是组件被复用（没销毁）时被调用；适用于动态路由的参数发生变化时
  37.       // 要去往的路由参数 to.params
  38.       // 正要离开的路由的参数 from.params
  39.       console.log(to.params.id);
  40.       console.log(from.params.id);
  41.       next()
  42.     },
  43.     beforeRouteLeave(to, from, next) {
  44.       // 导航要离开当前组件对应的路由时调用，从当前页去往其他页面的时候调用；可以用来做离开时提示用户信息没保存；
  45.       let doLeave = confirm('信息尚未保存，确定要离开吗？');
  46.       if (doLeave) {
  47.         next()
  48.       }
  49.     }
  50.   };
  52.   // 配置路由映射表
  53.   let routes = [
  54.     {
  55.       path: '/',
  56.       component: home
  57.     },
  58.     {
  59.       path: '/home',
  60.       component: home
  61.     },
  62.     {
  63.       path: '/about/:id',
  64.       component: about,
  65.     }
  66.   ];
  68.   // 创建 VueRouter 实例
  69.   let router = new VueRouter({
  70.     routes
  71.   });
  73.   let vm = new Vue({
  74.     el: '#app',
  75.     router
  76.   })
  77. </script>
  79. </body>
  80. </html>

四、Vue-cli

cli初始化项目步骤.png