vue2 全局路由守卫独享路由守卫组件内路由守卫共 5 个

路由守卫的参数介绍

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/home.vue";
Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
    },
    {
        path: "/about",
        name: "About",
        component: () => import("../views/About.vue"),
    },
]
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

// 这是一个全局前置路由，注意是全局的前置路由
// 在每一次切换路由之前，都会触发该函数注意是之前
// 它有三个参数，
// to==>到哪一个路由，form==>来源哪一个路由，next是否允许前往某一个路由
//如果没有执行next页面将会值空白页面
router.beforeEach((to, form, next) => {
    console.log("在每一次切换路由之前，都会触发该函数")
    next()
})

export default router;

权限就需要路由守卫

现在我们有一个需求，如果要进入就是richtext页面；
用户user等于必须等于admin。才能够进入
否者不能够就进入页面，并提示弹窗
let user='user'
// to==>到哪一个路由，
// form ==> 来源哪一个路由，
// next是否允许前往某一个路由，如果没有执行next()这页面空白
router.beforeEach((to, form, next) => {
    console.log(' to',to);
    if (to.path == '/richtext') {
        if (user == 'admin') {
            next();
        } else {
            alert('你不是管理员')
        }
    } else {
        next()
    }
})

元路由 meta

很多时候，我们需要将每一个路由上放置一个的信息
我们可以放在mata上
简单配置如下
{
    path: "/zujian",
    name: "zujian",
    meta: {
        user: admin,
        info:'我是admin',
        key:'key-value的形式'
    },
    component: () => import("../views/zujian.vue"),
},

全局后置路由守卫

// 全局后置路由守卫，它只有两个参数
// to==>到哪一个路由，
// form ==> 来源哪一个路由，
router.afterEach((to,form) => {
    console.log('to', to, form);
    console.log('form',to,form);
})

有的小伙伴可能会说，
这个后置路由守卫都切换到自己需要的页面了。
还守卫了毛线，靠！
你这样一说还真是的，我都切换完了。
还需要你守卫吗？你一遍凉快去吧。
难道它真的没有一点儿作用了吗？
不是的你说的那样,它是有作用的；
在动态更改系统顶部的标题的时候，
就需要使用这个全局后置路由守卫

router.afterEach((to,form) => {
    console.log('to', to);
    console.log('form', form);
    document.title=to.mata.title
})

独享路由守卫

独享路由守卫:顾名思义就是对某一个路由进行守卫
{
    path: "/zujian",
    name: "zujian",
    component: () => import("../views/zujian.vue"),
    // 独享路由~注意：没有独享后置路由
    //独享只有一个
    beforEnter: (to, form,next) => {
        // to==>到哪一个路由，
        // form ==> 来源哪一个路由，
        // next 放行
    }
},

组件内路由守卫

<template>
    <div>
       我是页面测试二
    </div>
</template>
<script>
export default {
  //通过路由规则进入该组件时候被调用
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter==>to',to, );
    console.log( 'beforeRouteEnter==>from',from );
    // 放行，如你你不放行，路由景无法进入该页面
    // 在视图上页面显示的是上一个页面哈
    next();
  },
  //通过路由规则，离开组件的时候被调用
  beforeRouteLeave(to, from, next){
    console.log('beforeRouteLeave==>',to );
    console.log('beforeRouteLeave==>',from );
    // 如果你不放行，路由无法离开该页面
    //  在视图上始终显示该页面，因为路由没有离开
    next();
  }
}
</script>