VueRouter-导航守卫路由守卫

Posted 2021-03-07 xshan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VueRouter-导航守卫路由守卫相关的知识，希望对你有一定的参考价值。

　　导航守卫：

　　就是导航过程中各个阶段的钩子函数。分为：全局导航守卫、路由导航守卫、组件导航守卫。

全局导航守卫：

在整个网页中，只要发生了路由变化，就会触发。全局导航守卫主要包含两个函数：beforeEach、afterEach。

beforeEach：

　　在路由发生了改变，但是还没有成功跳转的时候会调用。

router.beforeEach(function (to, from, next) {
            // to:将要跳转到哪个页面
            // from：从哪个页面来的
            // next: 
            // next():按照正常流程跳转
            // next("path"):跳转到指定的path路径
            // next(false)或者没有调用next():则不做任何跳转
            const authRoutes = ["account", "order"]
            // 判断要访问的页面是否为必须登录的页面
            if (authRoutes.indexOf(to.name) >= 0) {
                if (!logined) {
                    // 没有登录，跳转到登录页面
                    next("/login")
                } else {
                    next()
                }
            } else {
                if (to.name == "login") {
                    if (logined) {
                        next("/")
                    } else {
                        next()
                    }
                } else {
                    // 当其访问的不是必须登录的页面或者不是登录页面时，直接正常跳转
                    next()
                }
            }
        })

afterEach：

　　在跳转成功后会调用。

router.afterEach(function (to, from) {
            console.log("to：", to)
            console.log("from：", from)
        })

路由导航守卫：

在定义路由时添加`beforeEnter`参数。该函数是在路由跳转前执行的。

        　　{
                path: "/login",
                component: login,
                name: "login",
                beforeEnter: function (to, from, next) {
                    if (logined) {
                        next("/")
                    } else {
                        next()
                    }
                }
            }

　　整体代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>VueRouter-导航守卫、路由守卫</title>
</head>

<body>
    <div id="app">
        <router-link to="/">首页</router-link>
        <router-link to="/account">我的账户</router-link>
        <router-link to="/order">订单</router-link>
        <router-link to="/login">登录</router-link>
        <router-view></router-view>
    </div>
    <script>
        const logined = false
        var index = Vue.extend({
            template: "<h1>首页</h1>"
        })
        var account = Vue.extend({
            template: "<h1>账户</h1>"
        })
        var order = Vue.extend({
            template: "<h1>订单</h1>"
        })
        var login = Vue.extend({
            template: "<h1>登录</h1>"
        })
        let router = new VueRouter({
            routes: [{
                path: "/",
                component: index,
                name: "index"
            }, {
                path: "/account",
                component: account,
                name: "account"
            }, {
                path: "/order",
                component: order,
                name: "order"
            }, {
                path: "/login",
                component: login,
                name: "login",
                beforeEnter: function (to, from, next) {
                    if (logined) {
                        next("/")
                    } else {
                        next()
                    }
                }
            }]
        })
        router.beforeEach(function (to, from, next) {
            // to:将要跳转到哪个页面
            // from：从哪个页面来的
            // next: 
            // next():按照正常流程跳转
            // next("path"):跳转到指定的path路径
            // next(false)或者没有调用next():则不做任何跳转
            const authRoutes = ["account", "order"]
            // 判断要访问的页面是否为必须登录的页面
            if (authRoutes.indexOf(to.name) >= 0) {
                if (!logined) {
                    // 没有登录，跳转到登录页面
                    next("/login")
                } else {
                    next()
                }
            } else {
                if (to.name == "login") {
                    if (logined) {
                        next("/")
                    } else {
                        next()
                    }
                } else {
                    // 当其访问的不是必须登录的页面或者不是登录页面时，直接正常跳转
                    next()
                }
            }
        })
        router.afterEach(function (to, from) {
            console.log("to：", to)
            console.log("from：", from)
        })
        new Vue({
            el: "#app",
            router,
        })
    </script>
</body>

</html>

以上是关于VueRouter-导航守卫路由守卫的主要内容，如果未能解决你的问题，请参考以下文章