vue-例9-7meta演示没有登录不能访问用户管理.html

最新推荐文章于 2024-07-11 20:55:36 发布

虾米大王

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量72

点赞数

分类专栏： Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/modern358/article/details/129977413

版权

Vue 专栏收录该内容

661 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta演示没有登录不能访问用户管理</title>
</head>
<body>
    <div id="app">
        <div>
            <router-link to="/">首页</router-link>
            <router-link to="/user">用户管理</router-link>
            <router-link to="/post">帖子管理</router-link>
            <router-link to="/login">登录</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>

    <script>
        let routesObj = [
            {
                path:'/',
                component:{
                    template:'<div><h2>我是首页</h2></div>'
                }
            },
            {
                path: '/user',
                meta:{
                    login_required:true
                },
                component: {
                    template: '<div><ul><li>用户列表</li><li>权限管理</li></ul></div>'
                }
            },
            {
                path:'/post',
                component:{
                    template:'<div>详细信息<router-link to="more" append>天气</router-link><router-view></router-view></div>'
                },
                children:[
                    {
                        path:'more',
                        component:{
                            template:'<div><h2>要下雨了</h2></div>'
                        }
                    }
                ]
            },
            {
                path:'/login',
                component:{
                    template:'<div><h2>我是登录页面</h2></div>'
                }
            }
        ];
        
        let routerKK = new VueRouter({
            routes:routesObj
        });
        
        routerKK.beforeEach(function (to, from, next) {
            let logged_in = false;
            console.log('to.matched',to.matched);
            if(!logged_in && to.matched.some(function (it) {
                return it.meta.login_required
            })){
                next('/login')
            }
            else{
                next();
            }
        });

        let vm = new Vue({
            el:'#app',
            router:routerKK
        })
    </script>
</body>
</html>