vue路由6：导航钩子

最新推荐文章于 2024-07-05 11:46:24 发布

duansamve

最新推荐文章于 2024-07-05 11:46:24 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue router

本文链接：https://blog.youkuaiyun.com/duansamve/article/details/80039857

vue 专栏收录该内容

115 篇文章

订阅专栏

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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="../lib/vue.js"></script>
<script src="../lib/router.js"></script>
<script src="./js/app.js"></script>
</body>
</html>

app.js:

var routes = [
    {
        path: '/',
        component:{
            template: `
            <p>这里是首页</p>
        `
        }
    },{
        path: '/login',
        component: {
            template: `
            <p>这里是登录!</p>
        `
        }
    },{
        path: '/post',
        component: {
            template: `
            <p>这里是帖子管理</p>
        `
        }
    }
];

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

router.beforeEach(function(to, from, next){
    var login_in = true;
    if(!login_in && to.path == '/post'){
        next('/login')
    }else{
        next();
    }
})

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

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