vue全局路由守衛獨享路由守衛組件內路由守衛共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>