vue-路由高级

路由高级

整体效果可见下面地址

https://Besmall.github.io/vue...

1、导航钩子

如果我的账户没有登录的情况下，就跳到登录页面

【案例】

效果

 <div id="app">
    <p>
        <router-link to="/foo">首页</router-link>
        <router-link to="/bar">关于我们</router-link>
        <router-link to="/user">账户中心</router-link>
        <router-link to="/login">登录</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    var Foo = {
        template:"<div>我是首页</div>"
    }
    var Bar = {
        template:"<div>我是关于我们</div>"
    }
    var User = {
        template:"<div>我是账户中心</div>"
    }
    var Login = {
        template:"<div>我是登录</div>"
    }
    var routes = [
        {path:"/foo" , component:Foo},
        {path:"/bar" , component:Bar},
        {path:"/user" , component:User},
        {path:"/login" , component:Login}
    ]
    var router = new VueRouter({
        routes
    })
    //如果我的账户没有登录的情况下，就跳到登录页面
    router.beforeEach((to, from, next) => {
        if(to.path == "/user"){
            next("/login")
        }else{
            next();
        }
    })

    var app = new Vue({
        el:"#app",
        router
    });
</script>

下面我们做一下登录状态

效果

<div id="app">
    <p>
        <router-link to="/foo">首页</router-link>
        <router-link to="/bar">关于我们</router-link>
        <router-link to="/user">账户中心</router-link>
        <router-link to="/login">登录</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    var Foo = {
        template:"<div>我是首页</div>"
    }
    var Bar = {
        template:"<div>我是关于我们</div>"
    }
    var User = {
        template:"<div>我是账户中心</div>"
    }
    var Login = {
        template:"<div>我是登录</div>"
    }
    var routes = [
        {path:"/foo" , component:Foo},
        {path:"/bar" , component:Bar},
        {path:"/user" , component:User},
        {path:"/login" , component:Login}
    ]
    var router = new VueRouter({
        routes
    })
    //如果我的账户没有登录的情况下，就跳到登录页面
    //我们做一下登录状态,将登录状态用变量存一下
    router.beforeEach((to, from, next) => {
        var isLogin = false ;
        if(to.path == "/user"&&!isLogin){
            next("/login")
        }else{
            next();
        }
    })

    var app = new Vue({
        el:"#app",
        router
    });
</script>

如果我们让一个子级也判断是否登录要用到matched

【案例】

效果

<div id="app">
    <p>
        <router-link to="/foo">首页</router-link>
        <router-link to="/bar">关于我们</router-link>
        <router-link to="/user">账户中心</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/pwd">密码管理</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    var Foo = {
        template:"<div>我是首页</div>"
    }
    var Bar = {
        template:"<div>我是关于我们</div>"
    }
    var User = {
        template:"<div>我是账户中心<router-view></router-view></div>"
    }
    var Login = {
        template:"<div>我是登录</div>"
    }
    var Pwd = {
        template:"<div>我是密码管理</div>"
    }
    var routes = [
        {path:"/foo" , component:Foo},
        {path:"/bar" , component:Bar},
        {
            path:"/user" , component:User,
            children:[{
                path:"/pwd" , component:Pwd
            }]
        },
        {path:"/login" , component:Login},
        {path:"/pwd" , component:Pwd}
    ]
    var router = new VueRouter({
        routes
    })
    //如果我的账户没有登录的情况下，就跳到登录页面
    //我们做一下登录状态,将登录状态用变量存一下
    // 如果我们让一个子级也判断是否登录要用到matched
    router.beforeEach((to, from, next) => {
        var isLogin = false ;

        var reg = to.matched.some(itme=>{
            return itme.path.indexOf("/user")>-1
        })

        if(reg&&!isLogin){
            next("/login")
        }else{
            next();
        }
    })

    var app = new Vue({
        el:"#app",
        router
    });
</script>

2、路由元信息

定义路由的时候可以配置 meta 字段

点击登录让账户管理和密码管理可见，点击退出让其跳转登录页面

效果

<div id="app">
    <p>
        <router-link to="/foo">首页</router-link>
        <router-link to="/bar">关于我们</router-link>
        <router-link to="/user">账户中心</router-link>
        <router-link to="/user/pwd">密码管理</router-link>
        <router-link to="/login">登录</router-link>
        <input type="button" value="退出" @click="logout">
    </p>
    <router-view></router-view>
</div>
<template id="logintpl">
    <div>
        <input type="button" value="登录" @click="login">
    </div> 
</template>
<script>
    var Foo = {
        template:"<div>我是首页</div>"
    }
    var Bar = {
        template:"<div>我是关于我们</div>"
    }
    var User = {
        template:"<div>我是账户中心<router-view></router-view></div>"
    }
    var Pwd = {
        template:"<div>我是密码</div>"
    }

    var routes = [
        //我是首页
        {path:"/foo" , component:Foo},
        //我是关于我们
        {path:"/bar" , component:Bar},
        //我是账户中心
        {
            path:"/user" , 
            meta:{requireLogin:true},
            component:User,
            children:[
                {
                    //我是密码
                    path:"pwd" , 
                    meta:{requireLogin:true},
                    component:Pwd
                }
            ]
        },
   
        //我是登录
        {
            path:"/login" , 
            component:{
                template:"#logintpl",
                methods:{
                    login:function(){
                        isLogin = true
                    }
                }
            }
            
        }
    ]
    var router = new VueRouter({
        routes
    })
    //如果我的账户没有登录的情况下，就跳到登录页面
    //我们做一下登录状态,将登录状态用变量存一下
    // 如果我们让一个子级也判断是否登录要用到matched
    var isLogin = true ;
    router.beforeEach((to, from, next) => {
        if(to.meta.requireLogin&&!isLogin){
            next("/login")
        }else{
            next();
        }
    })

    var app = new Vue({
        el:"#app",
        router,
        methods:{
            logout:function(){
                isLogin = false
            }
        }
    });
</script>

喜欢的可以点赞加收藏