10-09-vue-router守卫难点代码

全局导航守卫

router文件夹中的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from "../views/Index"
Vue.use(VueRouter)

let router = new VueRouter({
  routes:[
    {path:"/",component:Index,name:"index"},
    {path:"/account",component:()=>import('../views/Account'),name: "account"},
    {path:"/order",component:()=>import('../views/Order'),name: "order"},
    {path:"/login",component:()=>import('../views/Login'),name: "login"},
    {path:"*",component:()=>import('../views/NotFound'),name: "notfound"},
  ]
})
// 在router对象上有一个方法，叫beforeEach(to,from,next)
// 全局导航守卫
router.beforeEach((to,from,next)=>{
  let isLogin = true;  // isLogin代表有没有登录  true代表登录  false代表没有登录
  // 在这里面就可以判断哪些路由可以放行，哪些路由不能放行
  // 配置一个名单
  let authRoutes = ["account","order"];
  if(authRoutes.indexOf(to.name) >=0 ){
    // 你要跳转的路由在名单中  需要判断你有没有登录
    if(!isLogin){
      // 没有登录
      next("/login");
    }else{
      // 登录了
      next();
    }
  }else if(to.name == "login"){  // 你直接访问登录有两种情况：1）登录时访问登录  2）没有登录时访问登录
    if(isLogin){
      // 登录后双访问登录
      next("/")
    }else{
      // 没有登录访问登录
      next();
    }
  }else{
    next();
  }
})

export default router;

单个路由守卫

router文件夹中的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from "../views/Index"
Vue.use(VueRouter)
let isLogin = true;
let router = new VueRouter({
  routes:[
    {path:"/",component:Index,name:"index"},
    {path:"/account",component:()=>import('../views/Account'),name: "account"},
    {path:"/order",component:()=>import('../views/Order'),name: "order"},
    {
      path:"/login",
      component:()=>import('../views/Login'),name: "login",
      beforeEnter(to,from,next){  // 这是一个单个路由的守卫
        // 可以单独地守卫这个/login
        if(isLogin){
          // 登录了   你登录了，你又访问登录路由
          next("/")
        }else{
          next();
        }
      },
    },
    {path:"*",component:()=>import('../views/NotFound'),name: "notfound"},
  ]
})

export default router;

组件中内的钩子（钩子中放代码）

router文件夹中的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from "../views/Index"
Vue.use(VueRouter)
let router = new VueRouter({
  routes:[
    {path:"/index",component:Index,name:"index"},
    {path:"/account/:userName",component:()=>import('../views/Account'),name: "account"},
    {path:"*",component:()=>import('../views/NotFound'),name: "notfound"},
  ]
})

export default router;

Account.vue文件
组件导航守卫：

• beforeRouteEnter(to,from,next)：当前页面被进入之前调用。里面的的方法只会执行一次。和mouted一样）如果多个路由对应此组件 ，此钩也是执行一次。在next中可以使用数据。
• beforeRouteUpdate(fo,from,next)：当前页面被复用了，参数改变了，会调用这个函数。
• beforeRouteLeave(fo,from,next)：当前页面即将离开了，会调用这个。即当前组件离开这个坑。

<template>
    <div>
        {{$route.params.userName}}个人账户
    </div>
</template>
<script>
    export default {
        name:"Account",
        data(){
            return{
                name:"lalala"
            }
        },
        // vue的生命周期的钩子函数
        mounted() {  // mounted钩子只执行一次  两个路由都对应了Account组件  此组件在vue会有复用机制
            // console.log(this.$route.params.userName)
        },
        // vue-router的生命周期的钩子函数  如果多个路由对应此组件  此钩也是执行一次
        beforeRouteEnter(to,from,next){ // 当进入到组件中就调用此钩子
            /*console.log("to:",to)
            console.log("from:",from)*/

            // console.log("beforeRouteEnter")
            console.log(to.params.userName)

            /*在这个钩子，如何得到data中的数据*/
            // console.log(this.name); // 此钩子中，this并不是当前组件对象
            next(vm=>{
                // console.log(vm.name)
            });

            // 这两个钩子，可以写守卫代码
        },
        beforeRouteUpdate(to,from,next){  // 不管多少个路由对应此组件，只有路由变化了，这个钩子必定执行
            // console.log("beforeRouteUpdate")
            console.log(to.params.userName)
            next();

            // 这两个钩子，可以写守卫代码
        },
        beforeRouteLeave(to,from,next){
            let flag = window.confirm("你确定要离开这个坑吗？");
            if(flag){
                next(); // 确定离开
            }
        }
    }
</script>

路由的元信息实现守卫

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from "../views/Index"
Vue.use(VueRouter)
let router = new VueRouter({
  routes:[
    {path:"/index",component:Index,name:"index",meta:{needLogin: false}},
    {path:"/profile",component:()=>import('../views/Profile'),name: "profile",meta:{needLogin:true}},
    {path:"/login",component:()=>import('../views/Login'),name: "login"},
    {path:"*",component:()=>import('../views/NotFound'),name: "notfound"},
  ]
})
let isLogin = true;   // 代表你当前有没有登录
// 全局导航守卫中可以得到上面路由配置的元信息
router.beforeEach((to,from,next)=>{
  console.log(to.meta.needLogin)
  if(!isLogin && to.meta.needLogin){
    // 需要登录： 1）登录了    2）没有登录
    // 你没有登录，但是此路由需要登录
    next("/login")
  }else{
    // 不需要登录
    next();
  }
})

export default router;