VUE导航钩子

最新推荐文章于 2024-04-26 17:37:33 发布

吃瓜的阳大王

最新推荐文章于 2024-04-26 17:37:33 发布

阅读量81

点赞数

文章标签： vue vue.js html5

本文链接：https://blog.csdn.net/qq_44822110/article/details/104802434

版权

VUE导航钩子

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航钩子</title>

</head>

<body>
    <div id="app">
        <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>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script>
    <script src="index.js"></script>
</body>

</html>

JS

// 直接在数组中以对象的方式定义规则(组件)[{path:'',component{}},{path:'',component{}}]
var routes = [{
        path: '/',
        component: {
            template: '<div><h1>首页</h1></div>'
        },

    },
    {
        path: '/login',
        component: {
            template: '<div><h1>登录</h1></div>'
        }
    },
    {
        path: '/post',
        component: {
            template: '<div><h1>帖子管理</h1></div>'
        }
    },
]


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

// 导航钩子 生命周期beforeEach
// to到哪里去  from从哪里来  next是function
router.beforeEach(function (to, from, next) {
    var logged_in = false;
    // 括号加上 ！ 就是代表false 不代表取反 不代表取反 不代表取反 不代表取反
    if (!logged_in && to.path == '/post') {
        next('/login');
    } else {
        next();
    }
})
// 导航钩子 生命周期afterEach
// router.afterEach(function (to, from) {

// })

new Vue({
    el: '#app',
    router: router
})

// var a = false
// if (!a) {
//     console.log('AAA' + a);
// } else {
//     console.log('BBB' + a);

// }

吃瓜的阳大王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE导航钩子

VUE导航钩子HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
复制链接

扫一扫