功能:实现功能登录后才能访问,提供两种方案,建议使用方案2.

  • 方案1:

前台html代码没啥重点,就是一个架子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>命名视图</title>


</head>
<body>
<div id="box">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/post">帖子</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>
    <!-- 注意js导入顺序,自己定义的要在下面 -->
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <script src="nav.js"></script>
</body>
</html>

重点看js代码中的router.beforeEach

var routes = [
    {
        path: '/',
        component: {
            template: `<div>主页</div>`,
        }
    },
    {
        path: '/login',
        component: {
            template: `<div><h1>登录</h1></div>`,
        }
    },
    {
        path: '/post',
        component: {
            template: `
            <div>
                <h1>帖子管理</h1>
                <router-link to="rain" append>候座</router-link>
                <router-view></router-view>
            </div>`,
        },
        children:[
            {
                path: 'rain',
                component:{
                    template: `<div><h1>雨天怎么候座?</h1></div>`
                }
            }
        ]
    },

];

var router = new VueRouter({
    routes: routes,
});

// 登录之后才能访问帖子
router.beforeEach(function (to,from,next) {
    // 未登录false,登录true
    var logged_in = true;
    if (!logged_in && to.matched.some(function (item) {
        return item.path == '/post';
        })){
        next('/login');
    }
    else{
        next();}
});

new Vue({
    // 注意加冒号':'
    el: '#box',
    router: router,
});

方案2:推荐使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>命名视图</title>


</head>
<body>
<div id="box">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/post">帖子</router-link>
        <router-link to="/article">文章</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>
    <!-- 注意js导入顺序,自己定义的要在下面 -->
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <script src="nav.js"></script>
</body>
</html>

JavaScript代码:

var routes = [
    {
        path: '/',
        component: {
            template: `<div>主页</div>`,
        }
    },
    {
        path: '/login',
        component: {
            template: `<div><h1>登录</h1></div>`,
        }
    },
    {
        path: '/post',
        // 元数据
        meta:{
            // 必须登录才可以看
            login_required: true
        },
        component: {
            template: `
            <div>
                <h1>帖子管理</h1>
                <router-link to="rain" append>候座</router-link>
                <router-view></router-view>
            </div>`,
        },
        children:[
            {
                path: 'rain',
                component:{
                    template: `<div><h1>雨天怎么候座?</h1></div>`
                }
            }
        ]
    },
    // 文章管理
    {
        path: '/article',
        // 元数据
        meta:{
            // 不用登录就可以看
            login_required: false
        },
        component: {
            template: `
            <div>
                <h1>文章管理</h1>
                <router-link to="django" append>Django</router-link>
                <router-view></router-view>
            </div>`,
        },
        children:[
            {
                path: 'django',
                component:{
                    template: `<div><h1>Django框架入门</h1></div>`
                }
            }
        ]
    },
];

var router = new VueRouter({
    routes: routes,
});

// 登录之后才能访问帖子
router.beforeEach(function (to,from,next) {
    // logged_in => 登录状态 => 未登录false,登录true
    // login_required => 权限限制 => 不需登录false,需登录true
    var logged_in = false;
    if (!logged_in && to.matched.some(function (item) {
        return item.meta.login_required;
        }))
        next('/login');
    else
        next();
});

new Vue({
    // 注意加冒号':'
    el: '#box',
    router: router,
});